(DEPRECATED) Slider directive implementation for AngularJS, without jQuery dependencies


Module License: MIT

Added by: Sam Deering





Stars: 259

Watchers: 259

Forks: 213

Module Description


I am unable to maintain or update this repository any more. If you know more well maintained forks, let me know so I can link it here.

PopSugar: (updated to work in current Angular version)

Venturocket: (highly modified)


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>


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


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" step="50" precision="2" ng-model="item.cost" translate="currencyFormatting"></slider>


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

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

var app = angular.module('app', ['uiSlider', '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.


  1. ~~Touch events support~~
  2. Smooth curve heterogeneity
  3. Filters support

License: MIT

Module stats last updated: 2017-12-01 16:00:05

Disclaimer: Some data on this page may have been gathered from the authors GitHub respository. If you see any mistakes or outdated information please let us know. Thanks!