https://github.com/prajwalkman/angular-slider

(DEPRECATED) Slider directive implementation for AngularJS, without jQuery dependencies
https://github.com/prajwalkman/angular-slider

Last synced: 4 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/prajwalkman/angular-slider
• Owner: prajwalkman
• License: mit
• Archived: true
• Created: 2013-04-20T10:25:52.000Z (over 11 years ago)
• Default Branch: master
• Last Pushed: 2017-01-23T23:21:57.000Z (almost 8 years ago)
• Last Synced: 2024-06-22T07:51:14.447Z (6 months ago)
• Language: CoffeeScript
• Homepage: http://prajwalkman.github.io/angular-slider
• Size: 764 KB
• Stars: 249
• Watchers: 23
• Forks: 177
• Open Issues: 53
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
DEPRECATED

==========

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: https://github.com/PopSugar/angular-slider (updated to work in current Angular version)

Venturocket: http://github.com/venturocket/angular-slider (highly modified)

RzSlider: https://github.com/rzajac/angularjs-slider (rewritten in JavaScript)

angular-slider

==============

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

### Example:

    


        


            
Name: {{item.name}}

            
Cost: {{item.cost}}
 

            

        

    


### Range:

    


        


            
Name: {{position.name}}

            
Minimum Age: {{position.minAge}}
 

            
Maximum Age: {{position.maxAge}}
 

            

        

    


### Formatting:

Raw data can be formatted as text using the _translate_ attribute.

In your controller:

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

And your HTML:

    

    

### Usage:

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:

    

        ...

        

            ...

            

        

    

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

### Roadmap:

1. ~~Touch events support~~

2. Smooth curve heterogeneity

3. Filters support

### License: MIT