AngularJS slider component with multiple thumbs support.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
.gitignore
LICENSE
README.md
bower.json
multirange.css
multirange.js

README.md

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>