Skip to content

Commit 00b6b29

Browse files
ValentinHValentinH
committed
Merge pull request #68 from ValentinH/add-ticks
Add a rzSliderShowTicks and rzSliderShowTicksValue
2 parents 6e5ffa5 + 88cbd3b commit 00b6b29

11 files changed

+396
-137
lines changed

‎Gruntfile.js

+120-98
Original file line numberDiff line numberDiff line change
@@ -1,115 +1,137 @@
1-
module.exports = function (grunt)
2-
{
3-
// Project configuration.
4-
grunt.initConfig({
1+
module.exports = function(grunt) {
2+
// Project configuration.
3+
grunt.initConfig({
54

6-
pkg: grunt.file.readJSON('package.json'),
5+
pkg: grunt.file.readJSON('package.json'),
76

8-
minBanner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
9-
'(c) <%= pkg.author %>, <%= pkg.repository.url %> - ' +
10-
'<%= grunt.template.today("yyyy-mm-dd") %> */\n',
7+
minBanner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
8+
'(c) <%= pkg.author %>, <%= pkg.repository.url %> - ' +
9+
'<%= grunt.template.today("yyyy-mm-dd") %> */\n',
1110

12-
recess: {
13-
options: {
14-
compile: true
15-
},
11+
recess: {
12+
options: {
13+
compile: true
14+
},
1615

17-
slider: {
18-
src: ['src/rzslider.less'],
19-
dest: 'dist/rzslider.css'
20-
},
16+
slider: {
17+
src: ['src/rzslider.less'],
18+
dest: 'dist/rzslider.css'
19+
},
2120

22-
min: {
23-
options: {
24-
compress: true,
25-
banner: '<%= minBanner %>'
21+
min: {
22+
options: {
23+
compress: true,
24+
banner: '<%= minBanner %>'
25+
},
26+
src: ['dist/rzslider.css'],
27+
dest: 'dist/rzslider.min.css'
28+
}
2629
},
27-
src: ['dist/rzslider.css'],
28-
dest: 'dist/rzslider.min.css'
29-
}
30-
},
3130

32-
uglify: {
33-
options: {
34-
report: 'min',
35-
banner: '<%= minBanner %>'
36-
},
37-
rzslider: {
38-
files: {
39-
'dist/rzslider.min.js': [
40-
'dist/rzslider.js'
41-
]
42-
}
43-
}
44-
},
31+
uglify: {
32+
options: {
33+
report: 'min',
34+
banner: '<%= minBanner %>'
35+
},
36+
rzslider: {
37+
files: {
38+
'dist/rzslider.min.js': [
39+
'dist/rzslider.js'
40+
]
41+
}
42+
}
43+
},
4544

46-
ngtemplates: {
47-
app: {
48-
src: 'src/**.html',
49-
dest: 'temp/templates.js',
50-
options: {
51-
htmlmin: {
52-
collapseBooleanAttributes: true,
53-
collapseWhitespace: true,
54-
removeAttributeQuotes: true,
55-
removeComments: true, // Only if you don't use comment directives!
56-
removeEmptyAttributes: true,
57-
removeRedundantAttributes: true,
58-
removeScriptTypeAttributes: true,
59-
removeStyleLinkTypeAttributes: true
60-
},
61-
module: 'rzModule',
62-
url: function(url) {
63-
return url.replace('src/', '');
64-
},
65-
bootstrap: function (module, script) {
66-
return 'module.run(function($templateCache) {\n' + script + '\n});';
67-
}
68-
}
69-
}
70-
},
45+
ngtemplates: {
46+
app: {
47+
src: 'src/**.html',
48+
dest: 'temp/templates.js',
49+
options: {
50+
htmlmin: {
51+
collapseBooleanAttributes: true,
52+
collapseWhitespace: true,
53+
removeAttributeQuotes: true,
54+
removeComments: true, // Only if you don't use comment directives!
55+
removeEmptyAttributes: true,
56+
removeRedundantAttributes: true,
57+
removeScriptTypeAttributes: true,
58+
removeStyleLinkTypeAttributes: true
59+
},
60+
module: 'rzModule',
61+
url: function(url) {
62+
return url.replace('src/', '');
63+
},
64+
bootstrap: function(module, script) {
65+
return 'module.run(function($templateCache) {\n' + script + '\n});';
66+
}
67+
}
68+
}
69+
},
7170

72-
replace: {
73-
dist: {
74-
options: {
75-
patterns: [
76-
{
77-
match: /\/\*templateReplacement\*\//,
78-
replacement: '<%= grunt.file.read("temp/templates.js") %>'
71+
replace: {
72+
dist: {
73+
options: {
74+
patterns: [
75+
{
76+
match: /\/\*templateReplacement\*\//,
77+
replacement: '<%= grunt.file.read("temp/templates.js") %>'
78+
}
79+
]
80+
},
81+
files: [
82+
{expand: true, flatten: true, src: ['src/rzslider.js'], dest: 'dist/'}
83+
]
7984
}
80-
]
8185
},
82-
files: [
83-
{expand: true, flatten: true, src: ['src/rzslider.js'], dest: 'dist/'}
84-
]
85-
}
86-
},
8786

88-
ngAnnotate: {
89-
options: {
90-
singleQuotes: true,
91-
},
92-
rzslider: {
93-
files: [{
94-
'dist/rzslider.js': 'dist/rzslider.js'
95-
}, {
96-
expand: true,
97-
src: ['dist/rzslider.js']
98-
}
99-
]
100-
}
101-
}
87+
ngAnnotate: {
88+
options: {
89+
singleQuotes: true,
90+
},
91+
rzslider: {
92+
files: [{
93+
'dist/rzslider.js': 'dist/rzslider.js'
94+
}, {
95+
expand: true,
96+
src: ['dist/rzslider.js']
97+
}
98+
]
99+
}
100+
},
101+
watch: {
102+
all: {
103+
files: ['dist/*', 'demo/*'],
104+
options: {
105+
livereload: true
106+
}
107+
},
108+
js: {
109+
files: ['src/*js', 'src/*.html'],
110+
tasks: ['js']
111+
},
112+
less: {
113+
files: ['src/*.less'],
114+
tasks: ['css']
115+
}
116+
},
117+
serve: {
118+
options: {
119+
port: 9000
120+
}
121+
}
102122

103-
});
123+
});
104124

105-
grunt.loadNpmTasks('grunt-contrib-uglify');
106-
grunt.loadNpmTasks('grunt-recess');
107-
grunt.loadNpmTasks('grunt-angular-templates');
108-
grunt.loadNpmTasks('grunt-replace');
109-
grunt.loadNpmTasks('grunt-ng-annotate');
125+
grunt.loadNpmTasks('grunt-contrib-uglify');
126+
grunt.loadNpmTasks('grunt-recess');
127+
grunt.loadNpmTasks('grunt-angular-templates');
128+
grunt.loadNpmTasks('grunt-replace');
129+
grunt.loadNpmTasks('grunt-ng-annotate');
130+
grunt.loadNpmTasks('grunt-contrib-watch');
131+
grunt.loadNpmTasks('grunt-serve');
110132

111-
grunt.registerTask('default', ['css', 'js']);
133+
grunt.registerTask('default', ['css', 'js']);
112134

113-
grunt.registerTask('css', ['recess']);
114-
grunt.registerTask('js', ['ngtemplates','replace', 'ngAnnotate', 'uglify']);
135+
grunt.registerTask('css', ['recess']);
136+
grunt.registerTask('js', ['ngtemplates', 'replace', 'ngAnnotate', 'uglify']);
115137
};

‎README.md

+10-1
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,14 @@ $scope.priceSlider = {
127127

128128
> Function to be called when a slider update is ended.
129129
130+
**rz-slider-show-ticks**
131+
132+
> Display a tick for each value.
133+
134+
**rz-slider-show-ticks-value**
135+
136+
> Display a tick for each value and the value of the tick.
137+
130138
```javascript
131139
// In your controller
132140

@@ -155,7 +163,8 @@ $scope.onSliderChange = function()
155163
rz-slider-model="priceSlider.min"
156164
rz-slider-high="priceSlider.max"
157165
rz-slider-translate="translate"
158-
rz-slider-on-change="onSliderChange()"></rzslider>
166+
rz-slider-on-change="onSliderChange()"
167+
rz-slider-show-ticks="true"></rzslider>
159168
```
160169

161170
## Slider events

‎demo/index.html

+20
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,24 @@ <h2>Alphabet slider example</h2>
8585
rz-slider-tpl-url="rzSliderTpl.html"></rzslider>
8686
</article>
8787

88+
<article>
89+
<h2>Slider with ticks example</h2>
90+
Value: {{ priceSlider4 | json }}
91+
<rzslider rz-slider-model="priceSlider4"
92+
rz-slider-floor="0"
93+
rz-slider-ceil="10"
94+
rz-slider-show-ticks="true"></rzslider>
95+
</article>
96+
97+
<article>
98+
<h2>Slider with ticks value example</h2>
99+
Value: {{ priceSlider5 | json }}
100+
<rzslider rz-slider-model="priceSlider5"
101+
rz-slider-floor="0"
102+
rz-slider-ceil="10"
103+
rz-slider-show-ticks-value="true"></rzslider>
104+
</article>
105+
88106
<article>
89107
<h2>Draggable range example</h2>
90108
Value:
@@ -131,6 +149,8 @@ <h2>Toggle slider example</h2>
131149

132150
$scope.priceSlider2 = 150;
133151
$scope.priceSlider3 = 250;
152+
$scope.priceSlider4 = 5;
153+
$scope.priceSlider5 = 5;
134154

135155
$scope.translate = function(value) {
136156
return '$' + value;

‎dist/rzslider.css

+33-3
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ rzslider span.rz-base {
3434

3535
rzslider span.rz-bar-wrapper {
3636
left: 0;
37+
z-index: 1;
3738
width: 100%;
3839
height: 32px;
3940
padding-top: 16px;
@@ -43,7 +44,7 @@ rzslider span.rz-bar-wrapper {
4344

4445
rzslider span.rz-bar {
4546
left: 0;
46-
z-index: 0;
47+
z-index: 1;
4748
width: 100%;
4849
height: 4px;
4950
background: #d8e0f3;
@@ -53,7 +54,7 @@ rzslider span.rz-bar {
5354
}
5455

5556
rzslider span.rz-bar.rz-selection {
56-
z-index: 1;
57+
z-index: 2;
5758
background: #0db9f0;
5859
-webkit-border-radius: 2px;
5960
-moz-border-radius: 2px;
@@ -62,7 +63,7 @@ rzslider span.rz-bar.rz-selection {
6263

6364
rzslider span.rz-pointer {
6465
top: -14px;
65-
z-index: 2;
66+
z-index: 3;
6667
width: 32px;
6768
height: 32px;
6869
cursor: pointer;
@@ -106,4 +107,33 @@ rzslider span.rz-bubble.rz-selection {
106107

107108
rzslider span.rz-bubble.rz-limit {
108109
color: #55637d;
110+
}
111+
112+
rzslider .rz-ticks {
113+
position: absolute;
114+
top: -3px;
115+
left: 0;
116+
z-index: 1;
117+
display: flex;
118+
width: 100%;
119+
padding: 0 11px;
120+
margin: 0;
121+
list-style: none;
122+
box-sizing: border-box;
123+
justify-content: space-between;
124+
}
125+
126+
rzslider .rz-ticks .tick {
127+
width: 10px;
128+
height: 10px;
129+
text-align: center;
130+
cursor: pointer;
131+
background: #666666;
132+
border-radius: 50%;
133+
}
134+
135+
rzslider .rz-ticks .tick .tick-value {
136+
position: absolute;
137+
top: -30px;
138+
transform: translate(-50%, 0);
109139
}

0 commit comments

Comments
 (0)