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
<div>
<rzslider
rz-slider-model="priceSlider"
rz-slider-ceil="450"></rzslider>
<!-- OR -->
rz-slider-model="slider.value"
rz-slider-options="slider.options"></rzslider>
</div>
```
```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.
**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**
> When set to true slider is used in presentation mode. No handle dragging.
> Model for high value slider. Providing both _rz-slider-model_ and _rz-slider-high_ will render range slider.
**rz-slider-draggable-range**
**rz-slider-options**
> When set to true and using a range slider, the range can be dragged by the selection bar.
> 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-translate**
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
}
````
> 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:
**floor** - _Number (defaults to 0)_: Minimum value for a slider.
**rz-slider-on-start**
**ceil** - _Number (defaults to `rz-slider-model`value)_: Maximum value for a slider.
> Function to be called when a slider update is started.
**step** - _Number (defaults to 1)_: Step between each value.
**rz-slider-on-change**
**precision** - _Number (defaults to 0)_: The precision to display values with. The `toFixed()` is used internally for this.
> Function to be called when rz-slider-model or rz-slider-high change.
**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-end**
**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 a slider update is ended.
**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-show-ticks**
**draggableRange** - _Boolean (defaults to false)_: When set to true and using a range slider, the range can be dragged by the selection bar.
> Display a tick for each value.
**showSelectionBar** - _Boolean (defaults to false)_: Set to true to always show the selection bar.
**rz-slider-show-ticks-value**
**hideLimitLabels** - _Boolean (defaults to false)_: Set to true to hide min / max labels
> Display a tick for each value and the value of the tick.
**readOnly** - _Boolean (defaults to false)_: Set to true to make the slider read-only.
**rz-slider-disabled**
**disabled** - _Boolean (defaults to false)_: Set to true to disable the slider.
> Disable the slider (apply a special style and unbind events)
**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-interval**
**showTicks** - _Boolean (defaults to false)_: Set to true to display a tick for each step of the slider.
> 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.
**showTicksValues** - _Boolean (defaults to false)_: Set to true to display a tick and the step value for each step of the slider.
```javascript
// In your controller
**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.
$scope.priceSlider={
min:100,
max:180,
ceil:500,
floor:0
};
**onStart** - _Function()_: Function to be called when a slider update is started.
$scope.translate=function(value)
{
return'$'+value;
}
**onChange** - _Function()_: Function to be called when rz-slider-model or rz-slider-high change.
$scope.onSliderChange=function()
{
console.log('changed',$scope.priceSlider);
}
```
**onEnd** - _Function()_: Function to be called when a slider update is ended.
```html
<rzslider
rz-slider-floor="priceSlider.floor"
rz-slider-ceil="priceSlider.ceil"
rz-slider-model="priceSlider.min"
rz-slider-high="priceSlider.max"
rz-slider-translate="translate"
rz-slider-on-change="onSliderChange()"
rz-slider-show-ticks="true"></rzslider>
## Change default options
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:
```js
angular.module('App', ['rzModule'])
.run(function( RzSliderOptions ) {
// show ticks for all sliders
RzSliderOptions.options( { showTicks: true } );
});
```
## 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.
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.
## 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
(the original source was written in CoffeeScript).
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).
