angular-slider

Slider directive for AngularJS. https://venturocket.github.io/angular-slider
License: MIT

Features

• Single or dual knob
• Fully Stylable
• Custom arbitrary scaling
• Adjustable knob "Stickiness"
• Adjustable minimum range width
• Draggable selection range
• Full touch event support

Known Issues

• When hidden during initialization (display: none;) the slider might not display correctly when shown. Issue $scope.$broadcast('refreshSlider'); in a parent scope to tell the slider to update the DOM.
• The step attribute conflicts with angular-foundation's step directive (docs). To remedy this, use step-width instead (it's an alias of step). step will be deprecated in the next minor release, so if you want to do a bit of future proofing you can start using step-width now and save yourself a bit of migration work later .

Installation

bower install venturocket-angular-slider

Usage

Requirements

Add <script>s to your html files for angular, angular-touch and angular-slider:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular-touch.min.js"></script>
<script src="build/angular-slider.min.js"></script>

And add vr.directives.slider as a dependency for your app:

angular.module('myApp', ['vr.directives.slider', ...]);

NOTE: in IE10/11 an annoying tooltip will show up unless you add the following css:

::-ms-tooltip {
    display: none;
}

Single Knob

Markup

As an element:

<slider
    ng-model="{expression}"
    floor="{float}"
    ceiling="{float}"
    step="{float}"
    precision="{integer}"
    stretch="{integer}"
    translate-fn="{expression}"
    scale-fn="{expression}"
    inverse-scale-fn="{expression}">
</slider>

As an attribute:

<div
    slider
    ng-model="{expression}"
    floor="{float}"
    ceiling="{float}"
    step="{float}"
    precision="{integer}"
    stretch="{integer}"
    translate-fn="{expression}"
    scale-fn="{expression}"
    inverse-scale-fn="{expression}">
</div>

Parameters

Dual Knob

Markup

As an element:

<slider
    ng-model="{expression}"
    ng-model-range="{expression}"
    floor="{float}"
    ceiling="{float}"
    buffer="{float}"
    step="{float}"
    precision="{integer}"
    stretch="{integer}"
    translate-fn="{expression}"
    translate-range-fn="{expression}"
    translate-combined-fn="{expression}"
    scale-fn="{expression}"
    inverse-scale-fn="{expression}">
</slider>

As an attribute:

<div
    slider
    ng-model="{expression}"
    ng-model-range="{expression}"
    floor="{float}"
    ceiling="{float}"
    buffer="{float}"
    step="{float}"
    precision="{integer}"
    stretch="{integer}"
    translate-fn="{expression}"
    translate-range-fn="{expression}"
    translate-combined-fn="{expression}"
    scale-fn="{expression}"
    inverse-scale-fn="{expression}">
</div>

Parameters

Scaling

You can supply any arbitrary scaling function (and its inverse) to the slider to suit your needs. The inverse scaling function MUST be specified if a scaling function is specified (and vice versa). The scaling/inverse function can be pretty much anything as long as they take a number as a parameter and return a number. Like this:

function scaleFn(value) {
    return Math.pow(value,3);
}
function inverseScaleFn(value) {
    var sign = (value == 0) ? 1 : (value/Math.abs(value));
    return sign * Math.pow(Math.abs(value),1/3);
}

A few notes:

• scaleFn(inverseScaleFn(x)) MUST produce x or you're gonna have a bad time
• If your scale function returns the same y for multiple x's within the range of the slider you're gonna have a bad time
• If the floor of your slider dips into negative numbers and you don't account for possible imaginary numbers you're gonna have a bad time

Additional Features

• ngChange support (docs)
• ngDisabled support (docs)
• implements ngModelController for form validation and dirty/pristine states (docs)