Skip to content

Commit 8015f5b

Browse files
rzajacrzajac
committed
- Refoactor
- Performance - Cleanup - Documentation
1 parent 2fe464d commit 8015f5b

File tree

8 files changed

+547
-418
lines changed

8 files changed

+547
-418
lines changed

‎README.md

Lines changed: 124 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,23 +2,140 @@
22

33
Slider directive implementation for AngularJS, without any dependencies.
44

5-
## Example
5+
- Mobile friendly
6+
- Fast
7+
- Well documented
8+
- Customizable
9+
- Simple to use
10+
11+
## Examples
12+
13+
### Single slider
14+
15+
```javascript
16+
// In your controller
17+
$scope.priceSlider = 150;
18+
```
19+
20+
```html
21+
<div>
22+
<rzslider rz-slider-model="priceSlider"></rzslider>
23+
</div>
24+
```
25+
26+
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.
627

728
```html
829
<div>
930
<rzslider
10-
rz-slider-floor="priceSlider.floor"
11-
rz-slider-ceil="priceSlider.ceil"
12-
rz-slider-low="priceSlider.min"
13-
rz-slider-high="priceSlider.max"
14-
rz-slider-step="5"></rzslider>
31+
rz-slider-model="priceSlider"
32+
rz-slider-ceil="450"></rzslider>
33+
34+
<!-- OR -->
35+
36+
<rzslider
37+
rz-slider-model="priceSlider"
38+
rz-slider-floor="0"
39+
rz-slider-ceil="450"></rzslider>
40+
1541
</div>
1642
```
1743

18-
## Plunkers
44+
### Range slider
45+
46+
```javascript
47+
// In your controller
48+
$scope.priceSlider = {
49+
min: 100,
50+
max: 180,
51+
ceil: 500,
52+
floor: 0
53+
};
54+
```
55+
56+
```html
57+
<rzslider
58+
rz-slider-floor="priceSlider.floor"
59+
rz-slider-ceil="priceSlider.ceil"
60+
rz-slider-model="priceSlider.min"
61+
rz-slider-high="priceSlider.max"></rzslider>
62+
```
63+
64+
## Directive attributes
65+
66+
**rz-slider-model**
67+
68+
> Model for low value slider. If only _rz-slider-model_ is provided single slider will be rendered.
69+
70+
**rz-slider-high**
71+
72+
> Model for high value slider. Providing both _rz-slider-high_ and _rz-slider-model_ will render range slider.
73+
74+
**rz-slider-floor**
75+
76+
> Minimum value for a slider.
77+
78+
**rz-slider-ceil**
79+
80+
> Maximum value for a slider.
81+
82+
**rz-slider-step**
83+
84+
> slider step.
85+
86+
**rz-slider-precision**
87+
88+
> The precision to display values with. The `toFixed()` is used internally for this.
89+
90+
**rz-slider-translate**
91+
92+
> 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:
93+
94+
```javascript
95+
// In your controller
96+
97+
$scope.priceSlider = {
98+
min: 100,
99+
max: 180,
100+
ceil: 500,
101+
floor: 0
102+
};
103+
104+
$scope.translate = function(value)
105+
{
106+
return '$' + value;
107+
}
108+
```
109+
110+
```html
111+
<rzslider
112+
rz-slider-floor="priceSlider.floor"
113+
rz-slider-ceil="priceSlider.ceil"
114+
rz-slider-model="priceSlider.min"
115+
rz-slider-high="priceSlider.max"
116+
rz-slider-translate="translate"></rzslider>
117+
```
118+
119+
## Plunker example
19120

20121
[http://embed.plnkr.co/EqGIlU/preview](http://embed.plnkr.co/EqGIlU/preview)
21122

123+
## Changelog
124+
125+
**v0.0.1**
126+
127+
Original rewrite to JavaScript
128+
129+
**v0.1.0**
130+
131+
Bug fixes
132+
Performance improvements
133+
Reduce number of angular bindings
134+
Reduce number of function calls in event handlers
135+
Avoid recalculate style
136+
Hit 60fps
137+
LESS variables for easier slider color customization
138+
22139
## Disclaimer
23140

24141
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

‎demo/index.html

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,15 +11,20 @@
1111

1212
<body ng-controller="MainCtrl">
1313

14-
<div style="background-color: #808080;margin-left: 50px;margin-right: 50px; padding: 30px;">
14+
<div style="background-color: #808080;margin-left: 40px;margin-right: 50px; padding: 30px;">
1515
<pre>{{ priceSlider | json }}</pre>
1616

17+
<input type="text" ng-model="priceSlider.min"/><br/>
18+
<input type="text" ng-model="priceSlider.max"/><br/>
19+
20+
<br/>
21+
1722
<rzslider
1823
rz-slider-floor="priceSlider.floor"
1924
rz-slider-ceil="priceSlider.ceil"
20-
rz-slider-low="priceSlider.min"
25+
rz-slider-model="priceSlider.min"
2126
rz-slider-high="priceSlider.max"
22-
rz-slider-step="5"></rzslider>
27+
rz-slider-step="1"></rzslider>
2328
<br> <br> <br>
2429

2530
<pre>{{ priceSlider2 | json }}</pre>
@@ -30,6 +35,12 @@
3035
rz-slider-model="priceSlider2"
3136
rz-slider-translate="translate"></rzslider>
3237

38+
<pre>{{ priceSlider2 | json }}</pre>
39+
<br> <br>
40+
<rzslider rz-slider-model="priceSlider3"
41+
rz-slider-floor="50"
42+
rz-slider-ceil="450"></rzslider>
43+
3344
</div>
3445
</body>
3546

@@ -43,13 +54,14 @@
4354
app.controller('MainCtrl', function($scope)
4455
{
4556
$scope.priceSlider = {
46-
min: 0,
47-
max: 300,
57+
min: 4,
58+
max: 481,
4859
ceil: 500,
4960
floor: 0
5061
};
5162

52-
$scope.priceSlider2 = 100;
63+
$scope.priceSlider2 = 150;
64+
$scope.priceSlider3 = 250;
5365

5466
$scope.translate = function(value)
5567
{

‎dist/rzslider.css

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ rzslider span.pointer {
4747
width: 32px;
4848
height: 32px;
4949
cursor: pointer;
50-
background-color: #fff;
50+
background-color: #ffffff;
5151
-webkit-border-radius: 16px;
5252
-moz-border-radius: 16px;
5353
border-radius: 16px;
@@ -86,6 +86,5 @@ rzslider span.bubble.selection {
8686
}
8787

8888
rzslider span.bubble.limit {
89-
/*color: #808080;*/
90-
89+
color: #67b700;
9190
}

‎dist/rzslider.min.css

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/rzslider.min.js

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.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.0.1",
3+
"version": "0.1.0",
44
"description": "Slider directive for AngularJS. No dependencies.",
55
"main": "rzslider.js",
66
"repository": {

0 commit comments

Comments
 (0)