ng-range-slider-commonjs

    0.2.0 • Public • Published

    ngRangeSlider

    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.

    Screenshot

    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 }.

    <section data-range-slider ng-model="range"></section>

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

    <section data-range-slider ng-model="range" min="minValue" max="maxValue"></section>

    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:

    <section data-range-slider ng-model="range" throttle="1500"></section>

    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.

    Install

    npm i ng-range-slider-commonjs

    DownloadsWeekly Downloads

    4

    Version

    0.2.0

    License

    MIT

    Last publish

    Collaborators

    • hanford