HTML5 range slider input – rangeslider.js
When HTML5 range input is not enough, the rangeslider.js comes!
HTML5 range slider UI
An easy way to create nice slider or range inputs. Try the rangeslider.js UI. Features, among others, are:
– Touchscreen friendly
– Small and fast, supports all major browsers including IE8+
– Responsive

Usage
bower install –save rangeslider.js
or
npm install –save rangeslider.js
Include jQuery and rangeslider.min.js to the project. Configuration is simple – over attributes.
Sample HTML:
<input type="range" min="10" // default 0 max="1000" // default 100 step="10" // default 1 value="300" // default min + (max-min)/2 data-orientation="vertical" // default horizontal >
Sample JS:
// Initialize a new plugin instance for all // e.g. $('input[type="range"]') elements. $('input[type="range"]').rangeslider(); // Destroy all plugin instances created from the // e.g. $('input[type="range"]') elements. $('input[type="range"]').rangeslider('destroy'); // Update all rangeslider instances for all // e.g. $('input[type="range"]') elements. // Usefull if you changed some attributes e.g. `min` or `max` etc. $('input[type="range"]').rangeslider('update', true);
API
The rangeslider.js API is compatible with the standard HTML input methods.
$('input[type="range"]').val(10).change();
Options
$('input[type="range"]').rangeslider({ // Feature detection the default is `true`. // Set this to `false` if you want to use // the polyfill also in Browsers which support // the native <input type="range"> element. polyfill: true, // Default CSS classes rangeClass: 'rangeslider', disabledClass: 'rangeslider--disabled', horizontalClass: 'rangeslider--horizontal', verticalClass: 'rangeslider--vertical', fillClass: 'rangeslider__fill', handleClass: 'rangeslider__handle', // Callback function onInit: function() {}, // Callback function onSlide: function(position, value) {}, // Callback function onSlideEnd: function(position, value) {} });
Demo & docs:
GitHub:
https://github.com/andreruffert/rangeslider.js
License: MIT
You may also like:
jQuery social sidebar slider – Social Sidebars plugin
Sly scrolling plugin – a lightweight, one directional slider
Material time picker library – a timer picker written in ES6 and SASS
Enjoy!
Related Posts
-
AlertifyJS – pretty JavaScript notifications
No Comments | Feb 16, 2016 -
Responsive HTML tables on all devices with jQuery table-shrinker
No Comments | Feb 13, 2020 -
Generate spinning activity indicators in JavaScript
No Comments | May 18, 2016 -
jQuery add pin to image plugin – tooltip photos with jquery.easypin
No Comments | Feb 18, 2016