<wc-slider>

Published on webcomponents.org

Adapted from the original JSFiddle.

Installation

<script type="module" src="https://unpkg.com/wc-slider/wc-slider.js"></script>

Alternatively:

<script type="module" src="https://cdn.skypack.dev/@annoyingmouse/wc-slider/wc-slider.js"></script>

You can use it minified by adding using this instead:

<script type="module" src="[WHATEVER CDN]/@annoyingmouse/wc-slider/dist/wc-slider.min.js"></script>

Please remember to change [WHATEVER CDN] to your favourite CDN

Examples

Basic Example (my original colours)

Changing width attribute randomly (99%) every ten seconds between 50% and 100%

Changing min and max attributes randomly (52, 70) every ten seconds

Changing from and to attributes randomly (#D6EDB3, #3BDF4F) every ten seconds

Changing deselected-from and deselected-to attributes randomly (#98067C, #1C2B13) every ten seconds