Danya Lette

Double Slider Widget

css javascript

1 – include these files:

<script src='double-slider/utils.js'></script>
<script src='double-slider/script.js'></script>
<link href='double-slider/style.css' rel='stylesheet' />

Here’s a zip.

2 – initialize your slider:

//grab your element and create a callback function
        var element = document.getElementByClassName("double-slider")[0];
        function callback(values){
             var min = values.min;
             var max = values.max;
             console.log("min: " + min + ", max: " + max);
        }

        //create the double-slider
	slider = new DoubleSlider(element, callback);

3 – set values

slider.moveTo(0.3,0.7);

4 – get values

var max = slider.getMax();
var min = slider.getMin();

//or grab the values using the callback function
//which is executed whenever slider values change