anandthakker / angular-multirange-slider

A multi-range slider directive for AngularJS

Motivating use-case

I needed a slider that could be used to choose choose a list of probabilities that always add up to 1.
I could have used a text input or slider for each probability and link it up so that changing one would update the others, but that's a fairly clunky interaction. This approach isn't perfect, but I think it's better...

Usage

###Get it

bower install angular-multirange-slider

###Include it in your html and your js

<script src="YOUR_BOWER_COMPONENTS/angular-multirange-slider/dist/multirange-slider.js"></script>

angular.module("YOUR ANGULAR MODULE", ['at.multirange-slider'])

###Use it

<slider [step="{step}"]>
  <slider-range model="{assignable_model_value}" ng-repeat="{repeat_expression}">
    <div class="slider-handle">&larr;&rarr;</div>
  </slider-range>
</slider>

<slider [step="{step}"]>
  <slider-range model="{assignable_model_value}" ng-repeat="{repeat_expression}">
    <div class="..." slider-handle>&larr;&rarr;</div>
  </slider-range>
</step>

{repeat expression} a standard ngRepeat comprehension. Something like (key,val) in mapObject or val in arrayThingy.

assignable_model_value is almost always something like val.propertyName.

step is an optional attribute that locks the values into multiples of {step size}.

The handles are created by the slider-handle directive, which can be set by class or attribute.

Examples.

###Style it The markup generated is a containing div (.slider-control), a div for the actual slider bar (.slider) and an inline-block div for each slider range (.slider-range). The ranges are children of the slider div, and their positioning is a percentage of the slider's width, so the whole thing should stretch/shrink to fit its containing element. The handles (.slider-handle) are floating right within the slider-range divs, with some margin tweaks so that they sit nicely centered on the border between ranges.

For reference, the resulting markup from the first example:

<div class="at-multirange-slider">
  <div class="slider" ng-transclude="" style="position: relative;">
        <div class="slider-range ng-scope" ng-transclude="" model="val.p"
          ng-repeat="(key,val) in otherProbs"
          style="width: calc(21.4071428571429% - 0px); margin-left: 0px;">
          <div class="slider-handle ng-scope" style="float: right; margin-right: -15.5px;">←→</div>
        </div>
        <div class="slider-range ng-scope" ng-transclude="" model="val.p"
        ng-repeat="(key,val) in otherProbs"
        style="width: calc(35.6785714285714% - 16px); margin-left: 16px;">
          <div class="slider-handle ng-scope" style="float: right; margin-right: -15.5px;">←→</div>
        </div>
        <div class="slider-range ng-scope" ng-transclude="" model="val.p"
        ng-repeat="(key,val) in otherProbs"
        style="width: calc(42.8142857142857% - 15.5px); margin-left: 15.5px;">
          <!-- Notice that this one doesn't have a handle in it, because it's the last. -->
        </div>
      </div>
</div>

Todo

• Touch events

angular-multirange-slider's Issues

Does not work on AngularJS 1.4.x

Several errors occur.

TypeError: Cannot read property 'push' of undefined at compile.pre (76)
TypeError: Cannot read property 'push' of undefined at link (126)
TypeError: Cannot read property 'push' of undefined at compile.pre (76)
TypeError: Cannot read property 'push' of undefined at link (126)
TypeError: Cannot read property 'push' of undefined at compile.pre (76)
TypeError: Cannot read property 'push' of undefined at link (126)
TypeError: slider.updateRangeWidths is not a function at Object.fn (74)

It does work, as long as I stay in the 1.3.x branch of AngularJS ... http://plnkr.co/edit/Bn1Y1YQnWIcgblFqAdPd?p=preview

Error when installing via bower

When I installed via bower, an exception was thrown saying that the slider controller's ranges property was undefined when trying to push the range into it in the slider range directive. Using Angular 1.4.8. I couldn't figure out why, because it seems fairly straightforward. But when I copy and pasted the code from dist/ on Github into my project, the error was no longer thrown. Just thought I'd let you know.

Also, it might be a good idea to wrap your code in a self-invoking anonymous function so that variables like sliderDirective aren't declared globally.