Angular-slider

Slider directive for AngularJS. Based on: http://github.com/prajwalkman/angular-slider

View the Project on GitHub Venturocket/angular-slider

angular-slider Build Status

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

Features

Known Issues

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

Param Type Required Default Details
ng-model expression Yes none Assignable angular expression to which to data-bind the value.
floor float Yes none The lowest value possible
ceiling float Yes none The highest value possible
step float No inf The width between each tick.
precision integer No 0 The numerical precision to which to round the value.
stretch integer No 3 How sticky the knobs will act. 1 = no stickiness
translate-fn expression No none A translation function to apply to all view values. Be sure to omit the parentheses (e.g. "transFunc" instead of "transFunc()")
scale-fn expression No none A scaling function to apply to the value. See the Scaling section below for more details. Be sure to omit the parentheses (e.g. "scaleFunc" instead of "scaleFunc()")
inverse-scale-fn expression No none The inverse of the scaling function. This is required if a scaling function is specified. See the Scaling section below for more details. Be sure to omit the parentheses (e.g. "scaleFunc" instead of "scaleFunc()")

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

Param Type Required Default Details
ng-model expression Yes none Assignable angular expression to which to data-bind the low value.
ng-model-range expression Yes none Assignable angular expression to which to data-bind the high value.
floor float Yes none The lowest value possible
ceiling float Yes none The highest value possible
buffer float No 0 The minimum difference between the low and high values
step float No inf The width between each tick.
precision integer No 0 The numerical precision to which to round the value.
stretch float No 3 How sticky the knobs will act. 1 = no stickiness
translate-fn expression No none A translation function to apply to most of the view values. Be sure to omit the parentheses (e.g. "transFunc" instead of "transFunc()")
translate-range-fn expression No none A translation function to apply to the range value. Be sure to omit the parentheses (e.g. "transFunc" instead of "transFunc()")
translate-combined-fn expression No none A translation function to apply to the combined value (when the knobs are too close together). Be sure to omit the parentheses (e.g. "transFunc" instead of "transFunc()")
scale-fn expression No none A scaling function to apply to the value. See the Scaling section below for more details. Be sure to omit the parentheses (e.g. "scaleFunc" instead of "scaleFunc()")
inverse-scale-fn expression No none The inverse of the scaling function. This is required if a scaling function is specified. See the Scaling section below for more details. Be sure to omit the parentheses (e.g. "scaleFunc" instead of "scaleFunc()")

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:

Additional Features