Slider directive implementation for AngularJS, without jQuery dependencies

This project is maintained by prajwalkman


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


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

Name: {{}}

Cost: {{item.cost}}


    <li ng-repeat="position in positions">
        <p>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>

Position Name: {{}}

Minimum Age: {{position.minAge}}

Maximum Age: {{position.maxAge}}


Raw data can be formatted as text using the translate attribute. In your controller:

$scope.currencyFormatting = function(value) { return value.toString() + " $" }

And your HTML:

<slider floor="100" ceiling="1000" precision="2" ng-model="item.cost" translate="currencyFormatting"></slider>

Name: {{}}

Cost: {{item.cost}}

Potatoes cost ?! No damn way!

Attach a class to the slider to override the slider's width to inline it amongst your text.

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.


  1. Smooth curve heterogeneity
  2. Filters support