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
- Colors for the thumb portions, or a gradient at the thumb spot
- Edtiable labels
- Thumbs will not overlap and stop when collide
###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>
