/angular-rangeslider-directive

Slider directive implementation for AngularJS, without jQuery dependencies

Primary LanguageHTMLMIT LicenseMIT

Archived Repository 🚨

This project is no longer maintained and has been archived. No further issues, PRs, or updates will be made.

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

License: MIT