angular-multirange's Introduction

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>

angular-multirange's People

Contributors

Stargazers

Watchers

angular-multirange's Issues

console of undefined

In angular-multirange component you're print a free console!
please remove it!!

in line 233 : console.log(scope.gradient);

How do I know when dragged has stopped?

I want to call a method in my server when dragged stopped (saving changes),
But I'm getting noticed every little change.
Is there any way knowing the dragged stopped?
thank you!

Use labels to move the sliders

Thanks for making the directive. It is a bit confusing with the steps and precision settings... at least it was for me. I would like to have the user to be able to move the slider. I modified it a bit but I have not been able to get the dragging by labels to function. If you have a few minutes to offer some advice I would greatly appreciate it.
http://plnkr.co/edit/Q8jETQ8TteH4zRPW5pYJ?p=preview

Recommend Projects