🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Angular multirange is an AngularJS slider component which allows you to create a range picker with multiple floating points.

Plugins Slider

Documentation

angular-multirange

WARNING: THIS PROJECT IS NO LONGER MAINTAINED

If you are interested in this project, please feel free to fork. I do not have the luxury of maintaining this project anymore.

AngularJS slider component with multiple thumbs support. This fork has following new features

  1. Colors for the thumb portions, or a gradient at the thumb spot
  2. Edtiable labels
  3. Thumbs will not overlap and stop when collide

###Preview Preview

###Install

bower install angular-multirange 

Include both multirange.js and multirange.css, then add vds.multirange to your angular.module dependencies.

###Usage

<vds-multirange ng-model="rangeArray" view="viewIndex"></vds-multirange> <vds-multirange ng-model="rangeArray" view="viewIndex" gradient="true"></vds-multirange>

rangeArray:

$scope.rangeArray = [      { value: 0.20, name: 'Clock In',color:'red' },      { value: 0.40, name: 'Start Break',color:'green' },      { value: 0.66, name: 'End Break' ,color:'blue'},      { value: 0.80, name: 'Clock Out' ,color:'yellow' },      { value: 0.90, name: 'Clock Out' ,color:'cyan' },      { value: 0.50, name: 'Clock Out' ,color:'brown' }     ];

###vds-multirange sample view configuration

$scope.views = [   {     zoom: 0.9,     step: 1/40,     // visible units for this view, first entry being the major unit     units: [       {         value: 1/10,         // function to transform your value into labels | true: value itself | false: none         labeller: function (n) { return n*10 }        },       {         value: 1/20,       }     ]   },   {     zoom: 1.5,     step: 1/80,     units: [       {         value: 1/20,         labeller: function (n) { return n*10 }       },       {         value: 1/40,       }     ]   } ];

then apply the view configuration using the views attribute.

<vds-multirange ng-model="rangeArray" view="viewIndex" views="views"></vds-multirange>

##vds-multirange-lite A light version of the slider also comes with this module which excludes labels, unit of measures, zooming and views.

<vds-multirange-lite ng-model="rangeArray"></vds-multirange-lite>

You May Also Like