rangeslider.js

Simple, small and fast JavaScript/jQuery polyfill for the HTML5 <input type="range"> slider element.



Programmatic attribute changes

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);
Check a working CodePen example.

Update to v1.0.0

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.

Ok! What do I have to do that everything works like before?

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.