horizontal-slider

Horizontal slider is a simple, themable slider written in ES6.

Slider examples:

Cool fact: there are no dependencies on external libraries.

Theming

See the horizontal-slider.css for examples and index.html for usage.

Usage

First add the horizontal-slider.css style.

<link href="horizontal-slider.css" media="all" rel="stylesheet" />

Then add the slider

<hslider id="s1" labelId='slider-text'></hslider>
<div id="slider-text">Drag the knob.</div>

Add the horizontal-slider.js script

<script src="./horizontal-slider.js" type="text/javascript"></script>

Then finally wire the slider by calling hslider.initializeSliders()

<script>
    hslider.initializeSliders();
</script>

Use slider.knob.onRangeChanged to add a callback for when the slider position has changed.

<script>
    const slider = hslider.getSliderById("s1"); // Get the slider
    slider.knob.onRangeChanged = function(s) {  // Attach callback
        console.log("slider:foo", s.knob.range)
    }
</script>