Dual-thumb Slider Control In Vanilla JavaScript – omni-slider

Preview:

Description:

omni-slider is a pure Vanilla JavaScript library used for creating dual-thumb slider controls to help the user select a numeric range.

Also has the ability to create a normal slider control with 1 handle that can be used to pick a numeric value.

Basic usage:

Add the omni-slider’s JavaScript and CSS files to the webpage.

<link rel="stylesheet" href="omni-slider.css">
<script src="omni-slider.js"></script>

The JavaScript to create a basic range slider inside the container ‘demo

var element = document.getElementById('demo');
var options = {
      // options here
};
var mySlider = new Slider(element, options);

Customization options with default values.

// slider only has one handle
isOneWay: false,
// returns a date object
isDate: false,
// handles will overlap or just sit next to each other
overlap: true,
// generic callback function is provided to apply to the value of the Slider
callbackFunction: function(){},
// Lower bounds of the slider 
min: null,
// Upper bounds of the slider 
max: null,
// Initial starting position of the left hand slider
start: null,
// Initial starting position of the right hand slider
end: null

Event listeners.

var mySlider = new Slider(element, options);
var harry = mySlider.subscribe('start', function(data) {
    // triggers when the handle is selected
    console.log('harry ' + data.left);
});
var potter = mySlider.subscribe('moving', function(data) {
    // triggers when the handle is being moved
    console.log('potter ' + data.right);
});
var data = mySlider.subscribe('stop', function(data) {
    // triggers when the handle is released
});