AngularJS multi slider component with multiple sliders and thumbs support. Easily bind to 'value' and 'title' json objects. CSS style is very simple easily customize your slider handles and bubbles. No JQuery dependency required. The only dependency is Angular.

*Derived from angular-rangeslider

Installing via Bower

Include both multislider.js and multislider.css, then add angularMultiSlider to your angular.module dependencies.



Angular Multiple Sliders


  1. Add the angularMultiSlider dependency to your Angular project. example:
    • angular.module('myApp', ['angularMultiSlider'])
  2. Create a 'multi-slider' directive in your view and give it a model, where ng-model is a variable on $scope. html <multi-slider floor="0" step="10" precision="2" ceiling="500" bubbles="true" ng-model="sliders"> </multi-slider> Controller scope for sliders: js $scope.sliders = [ {title:'User 1: ', value:100, color: 'Red'}, {title:'User 2: ', value:200, color: '#00FF00' }, {title:'User 3: ', value:450, } ];

Directive Properties

  • floor {number} Minimum Value for Slider
  • ceiling {number} Maximum Value for Slider
  • step {number} Value between steps in snapping on the scale
  • bubbles {string} true or false for showing the persistent bubbles or false for just on hover
  • precision {number} Maximum Value for Slider
  • ng-model {object} Bound values for sliders, requires 'value' for slider and 'title' for bubble

NgModel Properties

  • title {string} Optional Title for the bubbles that popup during grab or persistently set
  • value {number} Required - Value for the slider handle. This value should be between floor and ceiling inclusive.
  • color {HEX, RGB, or HTML color} Optional color for the handle. Basically and valid CSS color: This can be a HEX color, RGB Color, or HTML color.


  • Set Dirty / Pristine
  • Color option within json object for each slider
  • Handle overlapping tooltips by checking handle proximity
  • A key directive
  • Minify
  • Tests

Submitting an issue

Please be responsible, the open source community is not there to guess your problem or to do your job. When submitting an issue try as much as possible to:

  1. Search in the already existing issues. if your issue has not been raised before.

  2. Give a precise description including angular version, angular-multi-slider version.

  3. Give a way to reproduce your issue, the best would be with a running example, you can use plunkr, or codepen. Tip: Here is a plunker you can fork

  4. Isolate your code sample on the probable issue to avoid pollution and noise.

  5. Close your issue when a solution has been found (and share it with the community)

Note that 80% of the open issues are actually not issues but "problem" due to developers laziness or lack of investigation. These "issues" are a waste of time for us and especially if we have to setup a sample to reproduce the issue which those developers could have done. Any open issue which does not fulfill this contract will be closed without investigation.


Code licensed under New BSD License.

comments powered by Disqus
This page was last updated almost 3 years ago.