Slider directive implementation for AngularJS, without jQuery dependencies.


stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
8916Oct 21, 2016Mar 18, 2014Minified + gzip package size for @livingdocs/angular-slider in KB



Slider directive implementation for AngularJS, without jQuery dependencies. Requires AngularJS v1.1.4 or higher (optional isolate scope bindings support).

Added in this fork:

  • drag-end hook: ```

in your controller

calculateCostViability: ->

do some crazy calculations

- value decorator (display of printed values):

in your controller

seeThemDollars: (value) -> "$#{value}"

### Example:

        <li ng-repeat="item in items">
            <p>Name: {{item.name}}</p>
            <p>Cost: {{item.cost}}</p>
            <slider floor="100" ceiling="1000" step="50" precision="2" ng-model="item.cost"></slider>

### Range:

        <li ng-repeat="position in positions">
            <p>Name: {{position.name}}</p>
            <p>Minimum Age: {{position.minAge}}</p>
            <p>Maximum Age: {{position.maxAge}}</p>
            <slider floor="10" ceiling="60" ng-model-low="position.minAge" ng-model-high="position.maxAge"></slider>

### Usage:

Make sure to load AngularJS first, and then `slider.js`. Also include the related `slider.css`.

The module is named `ui.slider`. To enable it, you must simply list it as a dependency in your app. Example:

    var app = angular.module('app', ['ui.slider', 'ngResource', ...]);

You can then use it in your templates like so:

    <html ng-app='app'>
            <slider ...></slider>

### Known issues:

1. When applying filters or orders within an ng-repeat directive, the element can abruptly change its position when the value attached to the slider causes a filter to activate or the order to change.
Example: In the above snippet, it would be a very bad idea to order the list by item.cost.

### License: MIT

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.