Simple, small and fast JavaScript/jQuery polyfill for the HTML5 <input type="range">
slider element.
Release v2.0.0 is a MAJOR update with tiny incompatible internal changes.
You just have to update your JavaScript code if you use some internal defined variables in the callback functions (e.g. onInit
):this.handleWidth => this.handleDimension
this.rangeWidth => this.rangeDimension
this.maxHandleX => this.maxHandlePos
this.grabX => this.grabPos
The CSS is backwards compatible, but if you want to use the new introduced orientation support make sure to update to the latest CSS. There are some new modifiers .rangeslider--horizontal
& .rangeslider--vertical
.
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.