Skip to content

Commit 22a28e8

Browse files
ValentinHValentin Hervieu
ValentinH
authored and
Valentin Hervieu
committed
Update the read-me to match new options
1 parent 831212b commit 22a28e8

File tree

1 file changed

+109
-97
lines changed

1 file changed

+109
-97
lines changed

‎README.md

Lines changed: 109 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ Slider directive implementation for AngularJS, without any dependencies.
1414
## Examples
1515

1616
- **Various examples:** [http://rzajac.github.io/angularjs-slider/](http://rzajac.github.io/angularjs-slider/index.html)
17-
- **Slider inside Angular UI tabs:** http://jsfiddle.net/7w755fLv/
1817

1918
## Reporting issues
2019
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.
@@ -33,7 +32,7 @@ $ bower install --save angularjs-slider
3332

3433
### Module
3534
```javascript
36-
angular.module('', ['rzModule']);
35+
angular.module('yourApp', ['rzModule']);
3736
```
3837

3938
### Single slider
@@ -49,42 +48,56 @@ $scope.priceSlider = 150;
4948
</div>
5049
```
5150

52-
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.
51+
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`.
5352

5453
```html
5554
<div>
5655
<rzslider
57-
rz-slider-model="priceSlider"
58-
rz-slider-ceil="450"></rzslider>
59-
60-
<!-- OR -->
56+
rz-slider-model="slider.value"
57+
rz-slider-options="slider.options"></rzslider>
58+
</div>
59+
```
60+
```js
61+
$scope.slider = {
62+
value: 150,
63+
options: {
64+
floor: 0,
65+
ceil: 450
66+
}
67+
};
68+
```
6169

70+
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:
71+
```html
72+
<div>
6273
<rzslider
63-
rz-slider-model="priceSlider"
64-
rz-slider-floor="0"
65-
rz-slider-ceil="450"></rzslider>
66-
74+
rz-slider-model="value"
75+
rz-slider-options="{floor: 0, ceil: 450}"></rzslider>
6776
</div>
6877
```
78+
```js
79+
$scope.value = 150;
80+
```
6981

7082
### Range slider
7183

7284
```javascript
7385
// In your controller
74-
$scope.priceSlider = {
75-
min: 100,
76-
max: 180,
77-
ceil: 500,
78-
floor: 0
86+
$scope.slider = {
87+
min: 100,
88+
max: 180,
89+
options: {
90+
floor: 0,
91+
ceil: 450
92+
}
7993
};
8094
```
8195

8296
```html
8397
<rzslider
84-
rz-slider-floor="priceSlider.floor"
85-
rz-slider-ceil="priceSlider.ceil"
86-
rz-slider-model="priceSlider.min"
87-
rz-slider-high="priceSlider.max"></rzslider>
98+
rz-slider-model="slider.min"
99+
rz-slider-high="slider.max"
100+
rz-slider-options="slider.options"></rzslider>
88101
```
89102

90103
## Directive attributes
@@ -95,107 +108,107 @@ $scope.priceSlider = {
95108
96109
**rz-slider-high**
97110

98-
> Model for high value slider. Providing both _rz-slider-high_ and _rz-slider-model_ will render range slider.
99-
100-
**rz-slider-floor**
101-
102-
> Minimum value for a slider.
103-
104-
**rz-slider-ceil**
105-
106-
> Maximum value for a slider.
107-
108-
**rz-slider-step**
109-
110-
> slider step.
111-
112-
**rz-slider-precision**
113-
114-
> The precision to display values with. The `toFixed()` is used internally for this.
115-
116-
**rz-slider-hide-limit-labels**
117-
118-
> Set to true to hide min / max labels
119-
120-
**rz-slider-always-show-bar**
121-
122-
> Set to true to always show selection bar
111+
> Model for high value slider. Providing both _rz-slider-model_ and _rz-slider-high_ will render range slider.
123112
124-
**rz-slider-present-only**
113+
**rz-slider-options**
125114

126-
> When set to true slider is used in presentation mode. No handle dragging.
115+
> 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.
127116
128-
**rz-slider-draggable-range**
117+
The default options are:
118+
```js
119+
{
120+
floor: 0,
121+
ceil: null, //defaults to rz-slider-model
122+
step: 1,
123+
precision: 0,
124+
translate: null,
125+
id: null,
126+
stepsArray: null,
127+
draggableRange: false,
128+
showSelectionBar: false,
129+
hideLimitLabels: false,
130+
readOnly: false,
131+
disabled: false,
132+
interval: 350,
133+
showTicks: false,
134+
showTicksValues: false,
135+
scale: 1,
136+
onStart: null,
137+
onChange: null,
138+
onEnd: null
139+
}
140+
````
129141

130-
> When set to true and using a range slider, the range can be dragged by the selection bar.
142+
**floor** - _Number (defaults to 0)_: Minimum value for a slider.
131143

132-
**rz-slider-translate**
144+
**ceil** - _Number (defaults to `rz-slider-model`value)_: Maximum value for a slider.
133145

134-
> 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:
146+
**step** - _Number (defaults to 1)_: Step between each value.
135147

136-
**rz-slider-on-start**
148+
**precision** - _Number (defaults to 0)_: The precision to display values with. The `toFixed()` is used internally for this.
137149

138-
> Function to be called when a slider update is started.
150+
**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:
151+
```html
152+
<div>
153+
<rzslider
154+
rz-slider-model="slider.value"
155+
rz-slider-options="slider.options"></rzslider>
156+
</div>
157+
```
158+
```js
159+
$scope.slider = {
160+
value: 0,
161+
options: {
162+
floor: 0,
163+
ceil: 100,
164+
translate: function(value) {
165+
return '$' + value;
166+
}
167+
}
168+
};
169+
```
139170

140-
**rz-slider-on-change**
171+
**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.
141172

142-
> Function to be called when rz-slider-model or rz-slider-high change.
173+
**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.
143174

144-
**rz-slider-on-end**
175+
**draggableRange** - _Boolean (defaults to false)_: When set to true and using a range slider, the range can be dragged by the selection bar.
145176

146-
> Function to be called when a slider update is ended.
177+
**showSelectionBar** - _Boolean (defaults to false)_: Set to true to always show the selection bar.
147178

148-
**rz-slider-show-ticks**
179+
**hideLimitLabels** - _Boolean (defaults to false)_: Set to true to hide min / max labels
149180

150-
> Display a tick for each value.
181+
**readOnly** - _Boolean (defaults to false)_: Set to true to make the slider read-only.
151182

152-
**rz-slider-show-ticks-value**
183+
**disabled** - _Boolean (defaults to false)_: Set to true to disable the slider.
153184

154-
> Display a tick for each value and the value of the tick.
185+
**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.
155186

156-
**rz-slider-disabled**
187+
**showTicks** - _Boolean (defaults to false)_: Set to true to display a tick for each step of the slider.
157188

158-
> Disable the slider (apply a special style and unbind events)
189+
**showTicksValues** - _Boolean (defaults to false)_: Set to true to display a tick and the step value for each step of the slider.
159190

160-
**rz-slider-interval**
191+
**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.
161192

162-
> 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.
193+
**onStart** - _Function()_: Function to be called when a slider update is started.
163194

164-
```javascript
165-
// In your controller
195+
**onChange** - _Function()_: Function to be called when rz-slider-model or rz-slider-high change.
166196

167-
$scope.priceSlider = {
168-
min: 100,
169-
max: 180,
170-
ceil: 500,
171-
floor: 0
172-
};
173-
174-
$scope.translate = function(value)
175-
{
176-
return '$' + value;
177-
}
178-
179-
$scope.onSliderChange = function()
180-
{
181-
console.log('changed', $scope.priceSlider);
182-
}
183-
```
197+
**onEnd** - _Function()_: Function to be called when a slider update is ended.
184198

185-
```html
186-
<rzslider
187-
rz-slider-floor="priceSlider.floor"
188-
rz-slider-ceil="priceSlider.ceil"
189-
rz-slider-model="priceSlider.min"
190-
rz-slider-high="priceSlider.max"
191-
rz-slider-translate="translate"
192-
rz-slider-on-change="onSliderChange()"
193-
rz-slider-show-ticks="true"></rzslider>
199+
## Change default options
200+
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:
201+
```js
202+
angular.module('App', ['rzModule'])
203+
.run(function( RzSliderOptions ) {
204+
// show ticks for all sliders
205+
RzSliderOptions.options( { showTicks: true } );
206+
});
194207
```
195208

196209
## Slider events
197210

198-
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/).
211+
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/).
199212

200213
You can also force redraw with **rzSliderForceRender** event.
201214

@@ -220,13 +233,12 @@ $scope.$on("slideEnded", function() {
220233

221234
## Browser support
222235

223-
I use Slider on couple of my projects and it's being tested on desktop versions of Chrome, Firefox, Safari, IE 9/10.
236+
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).
224237
Slider is also tested on Android and iPhone using all browsers available on those platforms.
225238

226239
## Disclaimer
227240

228-
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
229-
(the original source was written in CoffeeScript).
241+
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).
230242

231243
## License
232244

0 commit comments

Comments
 (0)