Make sure the report is accompanied by a reproducible demo. The ideal demo is created by forking [our standard jsFiddle](http://jsfiddle.net/1ruqgnhk/), adding your own code and stripping it down to an absolute minimum needed to demonstrate the bug.
Make sure the report is accompanied by a reproducible demo. The ideal demo is created by forking [our standard jsFiddle](http://jsfiddle.net/1ruqgnhk/), adding your own code and stripping it down to an absolute minimum needed to demonstrate the bug.
Above example would render a slider from 0 to 150. If you need floor and ceiling values use `rz-slider-floor` and `rz-slider-ceil` attributes.
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`.
```html
```html
<div>
<div>
<rzslider
<rzslider
rz-slider-model="priceSlider"
rz-slider-model="slider.value"
rz-slider-ceil="450"></rzslider>
rz-slider-options="slider.options"></rzslider>
</div>
<!-- OR -->
```
```js
$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:
> Model for high value slider. Providing both _rz-slider-high_ and _rz-slider-model_ will render range slider.
> Model for high value slider. Providing both _rz-slider-model_ and _rz-slider-high_ will render range slider.
**rz-slider-floor**
> Minimum value for a slider.
**rz-slider-ceil**
> Maximum value for a slider.
**rz-slider-step**
> slider step.
**rz-slider-precision**
> The precision to display values with. The `toFixed()` is used internally for this.
**rz-slider-hide-limit-labels**
> Set to true to hide min / max labels
**rz-slider-always-show-bar**
> Set to true to always show selection bar
**rz-slider-present-only**
**rz-slider-options**
> When set to true slider is used in presentation mode. No handle dragging.
> 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.
**rz-slider-draggable-range**
The default options are:
```js
{
floor:0,
ceil:null,//defaults to rz-slider-model
step:1,
precision:0,
translate:null,
id:null,
stepsArray:null,
draggableRange:false,
showSelectionBar:false,
hideLimitLabels:false,
readOnly:false,
disabled:false,
interval:350,
showTicks:false,
showTicksValues:false,
scale:1,
onStart:null,
onChange:null,
onEnd:null
}
````
> When set to true and using a range slider, the range can be dragged by the selection bar.
**floor** - _Number (defaults to 0)_: Minimum value for a slider.
**rz-slider-translate**
**ceil** - _Number (defaults to `rz-slider-model`value)_: Maximum value for a slider.
> Custom translate function. Use this if you want to translate values displayed on the slider. For example if you want to display dollar amounts instead of just numbers do this:
**step** - _Number (defaults to 1)_: Step between each value.
**rz-slider-on-start**
**precision** - _Number (defaults to 0)_: The precision to display values with. The `toFixed()` is used internally for this.
> Function to be called when a slider update is started.
**translate** - _Function(value, sliderId)_: Custom translate function. Use this if you want to translate values displayed on the slider. For example if you want to display dollar amounts instead of just numbers:
```html
<div>
<rzslider
rz-slider-model="slider.value"
rz-slider-options="slider.options"></rzslider>
</div>
```
```js
$scope.slider = {
value: 0,
options: {
floor: 0,
ceil: 100,
translate: function(value) {
return '$' + value;
}
}
};
```
**rz-slider-on-change**
**id** - _Any (defaults to null)_: If you want to use the same `translate` function for several sliders, just set the `id` to anything you want, and it will be passed to the `translate(value, sliderId)` function as a second argument.
> Function to be called when rz-slider-model or rz-slider-high change.
**stepsArray** - _Array_: If you want to display a slider with non linear/number steps. Just pass an array with each slider value and that's it; the floor, ceil and step settings of the slider will be computed automatically. The `rz-slider-model` value will be the index of the selected item in the stepsArray.
**rz-slider-on-end**
**draggableRange** - _Boolean (defaults to false)_: When set to true and using a range slider, the range can be dragged by the selection bar.
> Function to be called when a slider update is ended.
**showSelectionBar** - _Boolean (defaults to false)_: Set to true to always show the selection bar.
**rz-slider-show-ticks**
**hideLimitLabels** - _Boolean (defaults to false)_: Set to true to hide min / max labels
> Display a tick for each value.
**readOnly** - _Boolean (defaults to false)_: Set to true to make the slider read-only.
**rz-slider-show-ticks-value**
**disabled** - _Boolean (defaults to false)_: Set to true to disable the slider.
> Display a tick for each value and the value of the tick.
**interval** - _Number in ms (defaults to 350)_: Internally, a `throttle` function (See http://underscorejs.org/#throttle) is used when the model or high values of the slider are changed from outside the slider. This is to prevent from re-rendering the slider too many times in a row. `interval` is the number of milliseconds to wait between two updates of the slider.
**rz-slider-disabled**
**showTicks** - _Boolean (defaults to false)_: Set to true to display a tick for each step of the slider.
> Disable the slider (apply a special style and unbind events)
**showTicksValues** - _Boolean (defaults to false)_: Set to true to display a tick and the step value for each step of the slider.
**rz-slider-interval**
**scale** - _Number (defaults to 1)_: If you display the slider in an element that uses `transform: scale(0.5)`, set the `scale` value to 2 so that the slider is rendered properly and the events are handled correctly.
> The interval (in ms) at which the slider DOM element updates when rz-slider-model or rz-slider-high change from outside the slider. Defaults to 350.
**onStart** - _Function()_: Function to be called when a slider update is started.
```javascript
**onChange** - _Function()_: Function to be called when rz-slider-model or rz-slider-high change.
// In your controller
$scope.priceSlider={
**onEnd** - _Function()_: Function to be called when a slider update is ended.
min:100,
max:180,
ceil:500,
floor:0
};
$scope.translate=function(value)
{
return'$'+value;
}
$scope.onSliderChange=function()
{
console.log('changed',$scope.priceSlider);
}
```
```html
## Change default options
<rzslider
If you want the change the default options for all the sliders displayed in your application, you can set them using the `RzSliderOptions.options()` method:
rz-slider-floor="priceSlider.floor"
```js
rz-slider-ceil="priceSlider.ceil"
angular.module('App', ['rzModule'])
rz-slider-model="priceSlider.min"
.run(function( RzSliderOptions ) {
rz-slider-high="priceSlider.max"
// show ticks for all sliders
rz-slider-translate="translate"
RzSliderOptions.options( { showTicks: true } );
rz-slider-on-change="onSliderChange()"
});
rz-slider-show-ticks="true"></rzslider>
```
```
## Slider events
## Slider events
To force slider to recalculate dimensions broadcast **reCalcViewDimensions** event from parent scope. This is useful for example when you use slider inside a widget where the content is hidden at start - see the "Sliders into modal" example [on the demo site](http://rzajac.github.io/angularjs-slider/).
To force slider to recalculate dimensions, broadcast **reCalcViewDimensions** event from parent scope. This is useful for example when you use slider inside a widget where the content is hidden at start - see the "Sliders into modal" example [on the demo site](http://rzajac.github.io/angularjs-slider/).
You can also force redraw with **rzSliderForceRender** event.
You can also force redraw with **rzSliderForceRender** event.
I use Slider on couple of my projects and it's being tested on desktop versions of Chrome, Firefox, Safari, IE 9/10.
I use Slider on couple of my projects and it's being tested on desktop versions of Chrome, Firefox, Safari, IE 9/10 (Ticks are displayed using flex display so they don't work on IE9).
Slider is also tested on Android and iPhone using all browsers available on those platforms.
Slider is also tested on Android and iPhone using all browsers available on those platforms.
## Disclaimer
## Disclaimer
This project is based on [https://github.com/prajwalkman/angular-slider](https://github.com/prajwalkman/angular-slider). It has been rewritten from scratch in JavaScript
This project is based on [https://github.com/prajwalkman/angular-slider](https://github.com/prajwalkman/angular-slider). It has been rewritten from scratch in JavaScript (the original source was written in CoffeeScript).
(the original source was written in CoffeeScript).
