ngRangeSlider
- Heroku: http://ng-range-slider.herokuapp.com/
- Bower:
bower install ng-range-slider
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.
Current range is {{range.from}} to {{range.to}}!Throttling
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.