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

Category: Javascript , Recommended | July 2, 2016
Author:pricelinelabs
Views Total:1,237 views
Official Page:Go to website
Last Update:July 2, 2016
License:MIT

Preview:

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

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
});

You Might Be Interested In:


Leave a Reply