rangeslider.js

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


Update to v2.0.0

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.


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.