Multi-handle range slider utilising the native HTML5 input range elements.
1 person uses it
Author: 1528477?v=2 Wildhoney
Submitted by: 1528477?v=3 Wildhoney


Travis   npm   License MIT   Experimental

ngRangeSlider is an experimental module for two reasons: it uses the input range element – and secondly, ngRangeSlider goes one step further to stack each input using special CSS selectors.

I created the module due to an observation on the limitation of input range elements – they are restricted to only one handle. Essentially ngRangeSlider is a HTML5 implementation of jQuery's range slider.

Getting Started

With ngRangeSlider the CSS is just as important as the JavaScript. Without the CSS the input range elements will still have a direct relationship, but they will not be stacked.

For the styles please refer to the Default.css document in the example, as this provides a fairly comprehensive list of the styles to be applied to the input range elements.

ngRangeSlider is a typical Angular directive which requires an ng-model attribute which it will write the range to in the form of { from: 0, to: 10 }.

You're also able to apply the min, max, and step attributes – and these may also be changed after the directive has been initialised.

Each and every time the value of the range has been updated the ng-model will be updated. In our case using the example above it will write to $scope.range.


ngRangeSlider also supports the concept of event throttling. For example, when you're dragging the slider, the ng-model is updated with every change. However when you're implementing a feature such as fast filtering, you may wish to throttle the updating of ng-model to prevent excessive AJAX requests and/or WebSocket events. By specifying the throttle attribute in milliseconds you can achieve this:

In the above example, the ng-model will only be updated every 1,500 milliseconds. You need to have either Underscore.js or Lo-Dash installed.

comments powered by Disqus
This page was last updated almost 4 years ago.