Simple, small and fast JavaScript/jQuery polyfill for the HTML5 <input type="range">
slider element.
Since release v1.2.0 it's possible to react to attribute changes. Useful if you want to change e.g the min
or max
attribute etc.
// a `input[type="range"]` element
var $inputRange = $('input[type="range"]');
// update some attribute
$inputRange.attr('min', 10);
// by simply calling the `update` method
// with argument `true` it will consider
// the changed attributes and update the rangelider instance.
$inputRange.rangeslider('update', true);
Release v1.0.0 is a MAJOR update with tiny incompatible API changes.
Before this release rangeslider.js fired a change
event everytime the handle was moved. With v1.0.0 we made some changes to fire the change
event only on handle release and a input
event if the handle is moving. The functionality is now like the native Browser implementation for <input type="range">
elements.
Basically you only have to do some changes in your code if you are listening to a change
event to immediately update e.g. an value output etc.
If so simply replace the change
event with an input
event. That's it!
$document.on('change', 'input[type="range"]', function(e) {
// Do something on handle release.
});
$document.on('input', 'input[type="range"]', function(e) {
// Do something if the handle is moving.
});
If you still have questions feel free to visit the gitter room for support.