Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit a59d2cf

Browse files
author
Jan Vesel
committed
update version, minimized version
1 parent e908580 commit a59d2cf

File tree

4 files changed

+17
-148
lines changed

4 files changed

+17
-148
lines changed

‎README.md‎

Lines changed: 12 additions & 142 deletions
Original file line numberDiff line numberDiff line change
@@ -1,162 +1,32 @@
11
## AngularJS slider directive with no external dependencies
22

3-
Slider directive implementation for AngularJS, without any dependencies.
3+
See original (https://github.com/rzajac/angularjs-slider) for complete documentation. This fork has additional:
44

5-
- Mobile friendly
6-
- Fast
7-
- Well documented
8-
- Customizable
9-
- Simple to use
10-
- Compatibility with jQuery Lite, ie. with full jQuery ( Thanks Jusas! https://github.com/Jusas)
5+
- "rz-slider-container" option that will be used for event bindig instead of document in original; if this option is not used original document element will be used
116

12-
## Examples
13-
14-
### Single slider
7+
## Example
158

9+
### rz-slider-container option
1610
```javascript
17-
// In your controller
18-
$scope.priceSlider = 150;
11+
// in controller
12+
$scope.sliderModel = 150;
13+
$scope.sliderContainer = $('#container-element');
1914
```
2015

2116
```html
2217
<div>
23-
<rzslider rz-slider-model="priceSlider"></rzslider>
18+
<rzslider rz-slider-model="priceSlider" rz-slider-container="sliderContainer"></rzslider>
2419
</div>
2520
```
2621

27-
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.
28-
29-
```html
30-
<div>
31-
<rzslider
32-
rz-slider-model="priceSlider"
33-
rz-slider-ceil="450"></rzslider>
34-
35-
<!-- OR -->
36-
37-
<rzslider
38-
rz-slider-model="priceSlider"
39-
rz-slider-floor="0"
40-
rz-slider-ceil="450"></rzslider>
41-
42-
</div>
43-
```
44-
45-
### Range slider
46-
47-
```javascript
48-
// In your controller
49-
$scope.priceSlider = {
50-
min: 100,
51-
max: 180,
52-
ceil: 500,
53-
floor: 0
54-
};
55-
```
56-
57-
```html
58-
<rzslider
59-
rz-slider-floor="priceSlider.floor"
60-
rz-slider-ceil="priceSlider.ceil"
61-
rz-slider-model="priceSlider.min"
62-
rz-slider-high="priceSlider.max"></rzslider>
63-
```
64-
65-
## Directive attributes
66-
67-
**rz-slider-model**
68-
69-
> Model for low value slider. If only _rz-slider-model_ is provided single slider will be rendered.
70-
71-
**rz-slider-high**
72-
73-
> Model for high value slider. Providing both _rz-slider-high_ and _rz-slider-model_ will render range slider.
74-
75-
**rz-slider-floor**
76-
77-
> Minimum value for a slider.
78-
79-
**rz-slider-ceil**
80-
81-
> Maximum value for a slider.
82-
83-
**rz-slider-step**
84-
85-
> slider step.
86-
87-
**rz-slider-precision**
88-
89-
> The precision to display values with. The `toFixed()` is used internally for this.
90-
91-
**rz-slider-translate**
92-
93-
> 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:
94-
95-
```javascript
96-
// In your controller
97-
98-
$scope.priceSlider = {
99-
min: 100,
100-
max: 180,
101-
ceil: 500,
102-
floor: 0
103-
};
104-
105-
$scope.translate = function(value)
106-
{
107-
return '$' + value;
108-
}
109-
```
110-
111-
```html
112-
<rzslider
113-
rz-slider-floor="priceSlider.floor"
114-
rz-slider-ceil="priceSlider.ceil"
115-
rz-slider-model="priceSlider.min"
116-
rz-slider-high="priceSlider.max"
117-
rz-slider-translate="translate"></rzslider>
118-
```
119-
120-
## Slider events
121-
122-
To force slider to recalculate dimensions broadcast **reCalcViewDimensions** event from parent scope. This is useful for example when you use slider with tabs - see *demo/tabs.html* example.
123-
124-
You can also force redraw with **rzSliderForceRender** event.
125-
126-
127-
## Plunker example
128-
129-
[http://embed.plnkr.co/53AUdB/preview](http://embed.plnkr.co/53AUdB/preview)
130-
131-
## Project integration
132-
133-
```html
134-
<script src="/path/to/angularjs/angular.min.js"></script>
135-
<script src="/path/to/slider/rzslider.min.js"></script>
136-
137-
<script>
138-
var YourApp = angular.module('myapp', ['rzModule']);
139-
</script>
140-
```
141-
142-
## Changelog
143-
144-
**v0.1.3**
145-
146-
Forked from this version.
147-
148-
**v0.1.4**
149-
150-
Touch events were broken if jQuery was used with Angular instead of jQuery lite. This version fixes them (Jusas).
15122

15223
**v0.1.5**
153-
154-
Added 'slideEnded' event emitted on slider knob dragging ended (Jusas).
24+
Forked from this version.
25+
**v0.1.6**
26+
Added container option for custom event binding
15527

15628
## Disclaimer
157-
158-
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
159-
(the original source was written in CoffeeScript).
29+
This is a fork of original angular-slider (https://github.com/rzajac/angularjs-slider) which is based on [https://github.com/prajwalkman/angular-slider](https://github.com/prajwalkman/angular-slider).
16030

16131
## License
16232

‎bower.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "angularjs-slider",
3-
"version": "0.1.6",
3+
"version": "0.1.7",
44
"homepage": "https://github.com/rzajac/angularjs-slider",
55
"authors": [
66
"Rafal Zajac <[email protected]>",

0 commit comments

Comments
 (0)