angular-rangeslider-directive's Introduction

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