Skip to content

Commit a58c22e

Browse files
rzajacrzajac
committed
Merge pull request #47 from angi-/master
Updated slider and demo
2 parents 5e669dd + 2e18cb3 commit a58c22e

File tree

6 files changed

+122
-84
lines changed

6 files changed

+122
-84
lines changed

‎demo/demo.css

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
* { margin: 0; padding: 0; }
2+
body { font-family: 'Open Sans', sans-serif; color: #1f2636; font-size: 14px; }
3+
header { background: #0db9f0; color: #fff; margin: -40px; margin-bottom: 40px; text-align: center; padding: 40px 0; }
4+
h1 { font-weight: 300; }
5+
.wrapper { background: #fff; padding: 40px; }
6+
article { margin-bottom: 40px; }

‎demo/index.html

Lines changed: 59 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -3,67 +3,78 @@
33

44
<head>
55
<meta charset="utf-8" />
6-
<title>AngularJS Slider Plunker</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<title>AngularJS Touch Slider</title>
8+
<link rel="stylesheet" href="demo.css" />
79
<link rel="stylesheet" href="../dist/rzslider.css" />
8-
<script src="../bower_components/angular/angular.min.js"></script>
9-
<script src="../rzslider.js"></script>
10+
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700' rel='stylesheet' type='text/css'>
1011
</head>
1112

1213
<body ng-controller="MainCtrl">
1314

14-
<div style="background-color: #808080;margin-left: 40px;margin-right: 50px; padding: 30px;">
15-
<pre>{{ priceSlider | json }}</pre>
16-
17-
<input type="text" ng-model="priceSlider.min"/><br/>
18-
<input type="text" ng-model="priceSlider.max"/><br/>
19-
20-
<br/>
21-
22-
<rzslider
23-
rz-slider-floor="priceSlider.floor"
24-
rz-slider-ceil="priceSlider.ceil"
25-
rz-slider-model="priceSlider.min"
26-
rz-slider-high="priceSlider.max"
27-
rz-slider-step="1"></rzslider>
28-
<br> <br> <br>
29-
30-
<pre>{{ priceSlider2 | json }}</pre>
31-
<br> <br>
32-
<rzslider
33-
rz-slider-floor="0"
34-
rz-slider-ceil="450"
35-
rz-slider-model="priceSlider2"
36-
rz-slider-translate="translate"></rzslider>
37-
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-
44-
<br><br><br>
45-
46-
<pre>{{ alphabetTranslate(letter) }}</pre>
47-
48-
<br><br>
49-
50-
<rzslider
51-
rz-slider-floor="0"
52-
rz-slider-ceil="letterMax"
53-
rz-slider-model="letter"
54-
rz-slider-translate="alphabetTranslate"></rzslider>
55-
56-
</div>
15+
<div class="wrapper">
16+
<header>
17+
<h1>AngularJS Touch Slider</h1>
18+
</header>
19+
20+
<article>
21+
<h2>Min/max slider example</h2>
22+
Value: <pre>{{ priceSlider | json }}</pre>
23+
24+
<input type="text" ng-model="priceSlider.min"/><br/>
25+
<input type="text" ng-model="priceSlider.max"/><br/>
26+
27+
<rzslider
28+
rz-slider-floor="priceSlider.floor"
29+
rz-slider-ceil="priceSlider.ceil"
30+
rz-slider-model="priceSlider.min"
31+
rz-slider-high="priceSlider.max"
32+
rz-slider-step="1"></rzslider>
33+
</article>
34+
35+
<article>
36+
<h2>One value slider example</h2>
37+
38+
Value: {{ priceSlider2 | json }}
39+
<rzslider
40+
rz-slider-floor="0"
41+
rz-slider-ceil="450"
42+
rz-slider-model="priceSlider2"
43+
rz-slider-translate="translate"></rzslider>
44+
</article>
45+
46+
<article>
47+
<h2>Currency slider example</h2>
48+
49+
Value: {{ priceSlider2 | json }}
50+
<rzslider rz-slider-model="priceSlider3"
51+
rz-slider-floor="50"
52+
rz-slider-ceil="450"></rzslider>
53+
</article>
54+
55+
<article>
56+
<h2>Alphabet slider example</h2>
57+
Value: {{ alphabetTranslate(letter) }}
58+
<rzslider
59+
rz-slider-floor="0"
60+
rz-slider-ceil="letterMax"
61+
rz-slider-model="letter"
62+
rz-slider-translate="alphabetTranslate"></rzslider>
63+
</article>
64+
65+
</div>
5766
</body>
5867

68+
<script src="../bower_components/angular/angular.min.js"></script>
69+
<script src="../rzslider.js"></script>
5970
<script>
6071
var app = angular.module('plunker', ['rzModule']);
6172

6273
app.controller('MainCtrl', function($scope)
6374
{
6475
$scope.priceSlider = {
65-
min: 4,
66-
max: 481,
76+
min: 100,
77+
max: 400,
6778
ceil: 500,
6879
floor: 0
6980
};

‎dist/rzslider.css

Lines changed: 22 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,15 @@
77
* Licensed under the MIT license
88
*/
99

10+
/* Slider colors */
11+
12+
/* Slider size parameters */
13+
1014
rzslider {
1115
position: relative;
1216
display: inline-block;
1317
width: 100%;
14-
height: 2px;
18+
height: 4px;
1519
margin: 30px 0 15px 0;
1620
vertical-align: middle;
1721
}
@@ -32,22 +36,28 @@ rzslider span.bar {
3236
z-index: 0;
3337
width: 100%;
3438
height: 100%;
35-
background: #fff;
39+
background: #d8e0f3;
40+
-webkit-border-radius: 2px;
41+
-moz-border-radius: 2px;
42+
border-radius: 2px;
3643
}
3744

3845
rzslider span.bar.selection {
3946
z-index: 1;
4047
width: 0;
41-
background: #67b700;
48+
background: #0db9f0;
49+
-webkit-border-radius: 2px;
50+
-moz-border-radius: 2px;
51+
border-radius: 2px;
4252
}
4353

4454
rzslider span.pointer {
45-
top: -15px;
55+
top: -14px;
4656
z-index: 2;
4757
width: 32px;
4858
height: 32px;
4959
cursor: pointer;
50-
background-color: #ffffff;
60+
background-color: #0db9f0;
5161
-webkit-border-radius: 16px;
5262
-moz-border-radius: 16px;
5363
border-radius: 16px;
@@ -59,32 +69,32 @@ rzslider span.pointer:after {
5969
left: 12px;
6070
width: 8px;
6171
height: 8px;
62-
background: #71818e;
72+
background: #ffffff;
6373
-webkit-border-radius: 4px;
6474
-moz-border-radius: 4px;
6575
border-radius: 4px;
6676
content: '';
6777
}
6878

6979
rzslider span.pointer:hover:after {
70-
background-color: #67b700;
80+
background-color: #ffffff;
7181
}
7282

7383
rzslider span.pointer.active:after {
74-
background-color: #67b700;
84+
background-color: #ffffff;
7585
}
7686

7787
rzslider span.bubble {
7888
top: -32px;
79-
padding: 1px 3px 1px 3px;
80-
color: #67b700;
89+
padding: 1px 3px;
90+
color: #55637d;
8191
cursor: default;
8292
}
8393

8494
rzslider span.bubble.selection {
85-
top: 15px;
95+
top: 16px;
8696
}
8797

8898
rzslider span.bubble.limit {
89-
color: #67b700;
99+
color: #55637d;
90100
}

‎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.

‎rzslider.less

Lines changed: 31 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -13,17 +13,26 @@
1313
border-radius: @radius;
1414
}
1515

16-
@handleActiveColor: #67b700;
17-
@handleHoverColor: #67b700;
18-
@labelTextColor: #67b700;
19-
@handleBgColor: #fff;
20-
@handleInnerColor: #71818e;
16+
/* Slider colors */
17+
@handleActiveColor: #fff;
18+
@handleHoverColor: #fff;
19+
@labelTextColor: #55637d;
20+
@handleBgColor: #0db9f0;
21+
@handleInnerColor: #fff;
2122
@limitLabelTextColor: @labelTextColor;
23+
@barFillColor: @handleBgColor;
24+
@barNormalColor: #d8e0f3;
25+
26+
/* Slider size parameters */
27+
@handleSize: 32px;
28+
@handlePointerSize: 8px;
29+
@bubblePadding: 1px 3px;
30+
@barHeight: 4px;
2231

2332
rzslider {
2433
display: inline-block;
2534
position: relative;
26-
height: 2px;
35+
height: @barHeight;
2736
width: 100%;
2837
margin: 30px 0 15px 0;
2938
vertical-align: middle;
@@ -45,33 +54,35 @@ rzslider span.bar {
4554
width: 100%;
4655
height: 100%;
4756
z-index: 0;
48-
background: #fff;
57+
background: @barNormalColor;
58+
.rounded(@barHeight/2);
4959
}
5060

5161
rzslider span.bar.selection {
5262
width: 0%;
5363
z-index: 1;
54-
background: #67b700;
64+
background: @barFillColor;
65+
.rounded(@barHeight/2);
5566
}
5667

5768
rzslider span.pointer {
5869
cursor: pointer;
59-
width: 32px;
60-
height: 32px;
61-
top: -15px;
70+
width: @handleSize;
71+
height: @handleSize;
72+
top: -@handleSize/2 + @barHeight/2;
6273
background-color: @handleBgColor;
6374
z-index: 2;
64-
.rounded(16px);
75+
.rounded(@handleSize/2);
6576
}
6677

6778
rzslider span.pointer:after {
6879
content: '';
69-
width: 8px;
70-
height: 8px;
80+
width: @handlePointerSize;
81+
height: @handlePointerSize;
7182
position: absolute;
72-
top: 12px;
73-
left: 12px;
74-
.rounded(4px);
83+
top: @handleSize/2 - @handlePointerSize/2;
84+
left: @handleSize/2 - @handlePointerSize/2;
85+
.rounded(@handlePointerSize/2);
7586
background: @handleInnerColor;
7687
}
7788

@@ -85,13 +96,13 @@ rzslider span.pointer.active:after {
8596

8697
rzslider span.bubble {
8798
cursor: default;
88-
top: -32px;
89-
padding: 1px 3px 1px 3px;
99+
top: -@handleSize;
100+
padding: @bubblePadding;
90101
color: @labelTextColor;
91102
}
92103

93104
rzslider span.bubble.selection {
94-
top: 15px;
105+
top: @handleSize/2;
95106
}
96107

97108
rzslider span.bubble.limit {

0 commit comments

Comments
 (0)