Simple, small and fast JavaScript/jQuery polyfill for the HTML5 <input type="range">
slider element.
This project is on GitHub.
onresize
so suitable for use within responsive designsThe rangeslider.js API is compatible with the standard HTML input methods.
$('input[type="range"]').val(10).change();
Simply calling something like this will just work.
The easiest way to install the files is with Bower or npm.
bower install --save rangeslider.js
npm install --save rangeslider.js
rangeslider.js is also hosted on cdnjs and jsdelivr.
Download latest and greatest manually: rangeslider.js-1.2.0.zip
Using rangeslider.js is simple. Configuration over attributes.
<input type="range" min="10" max="1000" step="10" value="300">
<script src="jquery.min.js"></script>
<script src="rangeslider.min.js"></script>
<script>
// 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);
</script>
$('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',
fillClass: 'rangeslider__fill',
handleClass: 'rangeslider__handle',
// Callback function
onInit: function() {},
// Callback function
onSlide: function(position, value) {},
// Callback function
onSlideEnd: function(position, value) {}
});
Feel free to contribute. Submit a Pull Request or open an issue for further discussion.
For a full changelog, visit the releases page on GitHub.
This project utilizes SemVer for versioning releases and maximum backward compatibility.
This project is under the Open Source MIT license.