JarCastingangular-rangeslider-directive
Styleable Range Slider Control directive for Angular with no jQuery or browser dependencies. Does not use the input range type. Allows for binding to model data.
Usage
angular
.module('app', ['angularRangeSlider'])
.controller('AppController', function($scope) {
$scope.sliderValue = 200;
$scope.lowerValue = 400;
$scope.upperValue = 600;
});
Single Item Example:
<p>Value: {{sliderValue}}</p>
<div range-slider
floor="100"
ceiling="1000"
step="50"
precision="2"
highlight="left"
ng-model="sliderValue"></div>
Range:
<p>Lower Value: {{lowerValue}}</p>
<p>Value 2: {{upperValue}}</p>
<div range-slider
floor="100"
ceiling="1000"
dragstop="true"
ng-model-low="lowerValue"
ng-model-high="upperValue"></div>
Properties:
- floor
{number}Minimum Value for Slider - ceiling
{number}Maximum Value for Slider - step
{number}Value between steps in snapping on the scale - highlight
{string}Left, Right, or false for single handle selectors, true or false for range selectors - precision
{number}Maximum Value for Slider - dragstop
{boolean}True will not update bound model data until mouse up - ngModel
{number}Bound value for a single handle slider - ngModelLow
{number}Bound value for lower limit of range selection - ngModelHigh
{number}Bound value for upper limit of range selection - disabled
{boolean}Bound value for disable element