README
AngularJS 1.X slider directive with no external dependencies
Looking for an Angular version (> 1.X)? We got you covered: https://github.com/angular-slider/ngx-slider (Thanks @piotrdz :heart: )!
I'm looking for a maintainer for this project. I have lost my Open Source Stamina for this project and I will probably not push any code to this project anymore (unless, I find some motivation later). I will try to merge pull requests if some are submitted, but only if they are really clean.
Slider directive implementation for AngularJS 1.X, without any dependencies: http://angular-slider.github.io/angularjs-slider.
- Mobile friendly
- Fast
- Well documented
- Customizable
- Simple to use
- Keyboard support
- Compatibility with jQuery Lite, ie. with full jQuery ( Thanks Jusas! https://github.com/Jusas)
- Supports right to left
Horizontal
Vertical
Custom style
Examples
- Simple example for single slider: http://jsfiddle.net/ValentinH/qjvxn4fc/
- Simple example for double slider: http://jsfiddle.net/ValentinH/hnyL2axs/
- Various examples: http://angular-slider.github.io/angularjs-slider
- Same examples with live code: https://jsfiddle.net/ValentinH/954eve2L/
Reporting issues
Make sure the report is accompanied by a reproducible demo. The ideal demo is created by forking our standard jsFiddle, adding your own code and stripping it down to an absolute minimum needed to demonstrate the bug.
Common issues
My slider is not rendered correctly on load
If the slider's parent element is not visible during slider initialization, the slider can't know when its parent becomes visible. For instance, when displaying a slider inside an element which visibility is toggled using ng-show, you need to send an event to force it to redraw when you set your ng-show to true.
Here's an example of refreshSlider
method that you should call whenever the slider becomes visible.
vm.refreshSlider = function() {
$timeout(function() {
$scope.$broadcast('rzSliderForceRender')
})
}
if you get some flickering issues, you can try to replace to $timeout
call by $scope.$postDigest
as suggested by @maknapp in this issue.
ng-show-example: http://jsfiddle.net/ValentinH/nzL6ax43/
UI-Boostrap tabs example: http://jsfiddle.net/ValentinH/bo23er5w/
Decimal value can't be typed in an input field linked to the slider
By default, the slider value is always rounded to the nearest step. A side effect is that when a input field is linked to the slider in order to enable a user to directly type a value, the value is rounded when it doesn't match the step. Even worse, when using decimal values, when a user will type "0.", the .
will directly be truncated since the value is rounded.
Solution: To avoid the value to be rounded, you need to use the enforceStep: false
option. Thus, the value can be modified externally without taking care of the step. See #298.
Installation
NPM
npm i angularjs-slider
or
yarn add angularjs-slider
Typescript Support
Typescript definition files are provided with this project. To use them, be sure you have the angular type definition peer dependency installed.
npm i @types/angular
or
Bower
$ bower install --save angularjs-slider
or
CDNJS
Directly use (replace X.X.X
by the version you want to use):
https://cdnjs.cloudflare.com/ajax/libs/angularjs-slider/X.X.X/rzslider.min.js
https://cdnjs.cloudflare.com/ajax/libs/angularjs-slider/X.X.X/rzslider.min.css
Project integration
Imports
<link rel="stylesheet" type="text/css" href="/path/to/angularjs-slider/dist/rzslider.css"/>
<script src="/path/to/angularjs/angular.min.js"></script>
<script src="/path/to/angularjs-slider/dist/rzslider.min.js"></script>
Module
angular.module('yourApp', ['rzSlider'])
Single slider
// In your controller
$scope.priceSlider = 150
<div>
<rzslider rz-slider-model="priceSlider"></rzslider>
</div>
Above example would render a slider from 0 to 150. If you need floor and ceiling values use rz-slider-options
attribute and provide an object with floor
and ceil
.
<div>
<rzslider
rz-slider-model="slider.value"
rz-slider-options="slider.options"></rzslider>
</div>
$scope.slider = {
value: 150,
options: {
floor: 0,
ceil: 450,
},
}
If you don't want to bother with an object set in your javascript file, you can pass an anonymous object literal to the slider options:
<div>
<rzslider
rz-slider-model="value"
rz-slider-options="{floor: 0, ceil: 450}"></rzslider>
</div>
$scope.value = 150
Range slider
// In your controller
$scope.slider = {
min: 100,
max: 180,
options: {
floor: 0,
ceil: 450,
},
}
<rzslider
rz-slider-model="slider.min"
rz-slider-high="slider.max"
rz-slider-options="slider.options"></rzslider>
Directive attributes
rz-slider-model
Model for low value slider. If only rz-slider-model is provided single slider will be rendered.
rz-slider-high
Model for high value slider. Providing both rz-slider-model and rz-slider-high will render range slider.
rz-slider-tpl-url
If you need to use a custom template, you can do so by providing a template URL to the
rz-slider-tpl-url
attribute. The default template is this one.
The following variables are available in the template as scope variables.
floorLabel
: The value set tofloor
inrz-slider-options
ceilLabel
: The value set toceil
inrz-slider-options
modelLabel
: The value set torz-slider-model
highLabel
: The value set torz-slider-high
cmbLabel
: The text shown when the two handlers are close to each other. (e.g. "30-40")
The library replaces the HTML contents of label elements in the template by default, if you want to stop this behaviour and tweak label HTML on your own, you need to set no-label-injection
class on the elements you're customizing.
See the Custom template to use angular directive for label for an example.
rz-slider-options
An object with all the other options of the slider. Each option can be updated at runtime and the slider will automatically be re-rendered.
The default options are:
{
floor: 0,
ceil: null, //defaults to rz-slider-model
step: 1,
precision: 0,
minLimit: null,
maxLimit: null,
restrictedRange: null,
minRange: null,
maxRange: null,
pushRange: false,
id: null,
translate: null,
getLegend: null,
stepsArray: null,
bindIndexForStepsArray: false,
draggableRange: false,
draggableRangeOnly: false,
showSelectionBar: false,
showSelectionBarEnd: false,
showOuterSelectionBars: false,
showSelectionBarFromValue: null,
hidePointerLabels: false,
hideLimitLabels: false,
autoHideLimitLabels: true,
readOnly: false,
disabled: false,
interval: 350,
showTicks: false,
showTicksValues: false,
ticksArray: null,
ticksTooltip: null,
ticksValuesTooltip: null,
vertical: false,
getSelectionBarColor: null,
getTickColor: null,
getPointerColor: null,
keyboardSupport: true,
scale: 1,
enforceStep: true,
enforceRange: false,
noSwitching: false,
onlyBindHandles: false,
onStart: null,
onChange: null,
onEnd: null,
rightToLeft: false,
reversedControls: false,
boundPointerLabels: true,
mergeRangeLabelsIfSame: false,
labelOverlapSeparator: ' - ',
customTemplateScope: null,
logScale: false,
customValueToPosition: null,
customPositionToValue: null,
selectionBarGradient: null,
ariaLabel: null,
ariaLabelledBy: null,
ariaLabelHigh: null,
ariaLabelledByHigh: null,
disableAnimation: false
}
floor - Number (defaults to 0): Minimum value for a slider.
ceil - Number (defaults to rz-slider-model
value): Maximum value for a slider.
step - Number (defaults to 1): Step between each value.
precision - Number (defaults to 0): The precision to display values with (number of decimals to be displayed). The toFixed()
is used internally for this.
minLimit - Number (defaults to null): The minimum value authorized on the slider.
maxLimit - Number (defaults to null): The maximum value authorized on the slider.
restrictedRange - Object (defaults to null): Has two Number properties, from and to that determine the bounds of an area that is not authorized for values. Applies to range slider only.
minRange - Number (defaults to null): The minimum range authorized on the slider. Applies to range slider only.
maxRange - Number (defaults to null): The maximum range authorized on the slider. Applies to range slider only.
pushRange - Boolean (defaults to false): Set to true to have a push behavior. When the min handle goes above the max, the max is moved as well (and vice-versa). The range between min and max is defined by the step
option (defaults to 1) and can also be override by the minRange
option. Applies to range slider only.
translate - Function(value, sliderId, label): Custom translate function. Use this if you want to translate values displayed on the slider.
sliderId
can be used to determine the slider for which we are translating the value. label
is a string that can take the following values:
- 'model': the model label
- 'high': the high label
- 'floor': the floor label
- 'ceil': the ceil label
- 'tick-value': the ticks labels
For example if you want to display dollar amounts instead of just numbers:
<div>
<rzslider
rz-slider-model="slider.value"
rz-slider-options="slider.options"></rzslider>
</div>
$scope.slider = {
value: 0,
options: {
floor: 0,
ceil: 100,
translate: function(value) {
return '