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'sstep
directive (docs). To remedy this, usestep-width
instead (it's an alias ofstep
).step
will be deprecated in the next minor release, so if you want to do a bit of future proofing you can start usingstep-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:
And add vr.directives.slider
as a dependency for your app:
angular;
NOTE: in IE10/11 an annoying tooltip will show up unless you add the following css:
Single Knob
Markup
As an element:
As an attribute:
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:
As an attribute:
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:
{ return Math;} { var sign = value == 0 ? 1 : value/Math; return sign * Math;}
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