Add a rzSliderShowTicks

Gruntfile.js

@@ -1,115 +1,137 @@
-module.exports = function (grunt)
-{
-  // Project configuration.
-  grunt.initConfig({
+module.exports = function(grunt) {
+    // Project configuration.
+    grunt.initConfig({
 
-    pkg: grunt.file.readJSON('package.json'),
+        pkg: grunt.file.readJSON('package.json'),
 
-    minBanner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
-      '(c) <%= pkg.author %>, <%= pkg.repository.url %> - ' +
-      '<%= grunt.template.today("yyyy-mm-dd") %> */\n',
+        minBanner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
+        '(c) <%= pkg.author %>, <%= pkg.repository.url %> - ' +
+        '<%= grunt.template.today("yyyy-mm-dd") %> */\n',
 
-    recess: {
-      options: {
-        compile: true
-      },
+        recess: {
+            options: {
+                compile: true
+            },
 
-      slider: {
-        src: ['src/rzslider.less'],
-        dest: 'dist/rzslider.css'
-      },
+            slider: {
+                src: ['src/rzslider.less'],
+                dest: 'dist/rzslider.css'
+            },
 
-      min: {
-        options: {
-          compress: true,
-          banner: '<%= minBanner %>'
+            min: {
+                options: {
+                    compress: true,
+                    banner: '<%= minBanner %>'
+                },
+                src: ['dist/rzslider.css'],
+                dest: 'dist/rzslider.min.css'
+            }
         },
-        src: ['dist/rzslider.css'],
-        dest: 'dist/rzslider.min.css'
-      }
-    },
 
-    uglify: {
-      options: {
-        report: 'min',
-        banner: '<%= minBanner %>'
-      },
-      rzslider: {
-        files: {
-          'dist/rzslider.min.js': [
-            'dist/rzslider.js'
-          ]
-        }
-      }
-    },
+        uglify: {
+            options: {
+                report: 'min',
+                banner: '<%= minBanner %>'
+            },
+            rzslider: {
+                files: {
+                    'dist/rzslider.min.js': [
+                        'dist/rzslider.js'
+                    ]
+                }
+            }
+        },
 
-    ngtemplates:  {
-      app:        {
-        src:      'src/**.html',
-        dest:     'temp/templates.js',
-        options:  {
-          htmlmin: {
-            collapseBooleanAttributes:      true,
-            collapseWhitespace:             true,
-            removeAttributeQuotes:          true,
-            removeComments:                 true, // Only if you don't use comment directives!
-            removeEmptyAttributes:          true,
-            removeRedundantAttributes:      true,
-            removeScriptTypeAttributes:     true,
-            removeStyleLinkTypeAttributes:  true
-          },
-          module: 'rzModule',
-          url: function(url) {
-            return url.replace('src/', '');
-          },
-          bootstrap: function (module, script) {
-            return 'module.run(function($templateCache) {\n' + script + '\n});';
-          }
-        }
-      }
-    },
+        ngtemplates: {
+            app: {
+                src: 'src/**.html',
+                dest: 'temp/templates.js',
+                options: {
+                    htmlmin: {
+                        collapseBooleanAttributes: true,
+                        collapseWhitespace: true,
+                        removeAttributeQuotes: true,
+                        removeComments: true, // Only if you don't use comment directives!
+                        removeEmptyAttributes: true,
+                        removeRedundantAttributes: true,
+                        removeScriptTypeAttributes: true,
+                        removeStyleLinkTypeAttributes: true
+                    },
+                    module: 'rzModule',
+                    url: function(url) {
+                        return url.replace('src/', '');
+                    },
+                    bootstrap: function(module, script) {
+                        return 'module.run(function($templateCache) {\n' + script + '\n});';
+                    }
+                }
+            }
+        },
 
-    replace: {
-      dist: {
-        options: {
-          patterns: [
-            {
-              match: /\/\*templateReplacement\*\//,
-              replacement: '<%= grunt.file.read("temp/templates.js") %>'
+        replace: {
+            dist: {
+                options: {
+                    patterns: [
+                        {
+                            match: /\/\*templateReplacement\*\//,
+                            replacement: '<%= grunt.file.read("temp/templates.js") %>'
+                        }
+                    ]
+                },
+                files: [
+                    {expand: true, flatten: true, src: ['src/rzslider.js'], dest: 'dist/'}
+                ]
             }
-          ]
         },
-        files: [
-          {expand: true, flatten: true, src: ['src/rzslider.js'], dest: 'dist/'}
-        ]
-      }
-    },
 
-    ngAnnotate: {
-      options: {
-        singleQuotes: true,
-      },
-      rzslider: {
-        files: [{
-            'dist/rzslider.js': 'dist/rzslider.js'
-          }, {
-            expand: true,
-            src: ['dist/rzslider.js']
-          }
-        ]
-      }
-    }
+        ngAnnotate: {
+            options: {
+                singleQuotes: true,
+            },
+            rzslider: {
+                files: [{
+                    'dist/rzslider.js': 'dist/rzslider.js'
+                }, {
+                    expand: true,
+                    src: ['dist/rzslider.js']
+                }
+                ]
+            }
+        },
+        watch: {
+            all: {
+                files: ['dist/*', 'demo/*'],
+                options: {
+                    livereload: true
+                }
+            },
+            js: {
+                files: ['src/*js', 'src/*.html'],
+                tasks: ['js']
+            },
+            less: {
+                files: ['src/*.less'],
+                tasks: ['css']
+            }
+        },
+        serve: {
+            options: {
+                port: 9000
+            }
+        }
 
-  });
+    });
 
-  grunt.loadNpmTasks('grunt-contrib-uglify');
-  grunt.loadNpmTasks('grunt-recess');
-  grunt.loadNpmTasks('grunt-angular-templates');
-  grunt.loadNpmTasks('grunt-replace');
-  grunt.loadNpmTasks('grunt-ng-annotate');
+    grunt.loadNpmTasks('grunt-contrib-uglify');
+    grunt.loadNpmTasks('grunt-recess');
+    grunt.loadNpmTasks('grunt-angular-templates');
+    grunt.loadNpmTasks('grunt-replace');
+    grunt.loadNpmTasks('grunt-ng-annotate');
+    grunt.loadNpmTasks('grunt-contrib-watch');
+    grunt.loadNpmTasks('grunt-serve');
 
-  grunt.registerTask('default', ['css', 'js']);
+    grunt.registerTask('default', ['css', 'js']);
 
-  grunt.registerTask('css', ['recess']);
-  grunt.registerTask('js', ['ngtemplates','replace', 'ngAnnotate', 'uglify']);
+    grunt.registerTask('css', ['recess']);
+    grunt.registerTask('js', ['ngtemplates', 'replace', 'ngAnnotate', 'uglify']);
 };

README.md

@@ -127,6 +127,14 @@ $scope.priceSlider = {
 
 > Function to be called when a slider update is ended.
 
+**rz-slider-show-ticks**
+
+> Display a tick for each value.
+
+**rz-slider-show-ticks-value**
+
+> Display a tick for each value and the value of the tick.
+
 ```javascript
 // In your controller
 
@@ -155,7 +163,8 @@ $scope.onSliderChange = function()
     rz-slider-model="priceSlider.min"
     rz-slider-high="priceSlider.max"
     rz-slider-translate="translate"
-    rz-slider-on-change="onSliderChange()"></rzslider>
+    rz-slider-on-change="onSliderChange()"
+    rz-slider-show-ticks="true"></rzslider>
 ```
 
 ## Slider events

demo/index.html

@@ -85,6 +85,24 @@ <h2>Alphabet slider example</h2>
                 rz-slider-tpl-url="rzSliderTpl.html"></rzslider>
     </article>
 
+    <article>
+        <h2>Slider with ticks example</h2>
+        Value: {{ priceSlider4 | json }}
+        <rzslider rz-slider-model="priceSlider4"
+                  rz-slider-floor="0"
+                  rz-slider-ceil="10"
+                  rz-slider-show-ticks="true"></rzslider>
+    </article>
+
+    <article>
+        <h2>Slider with ticks value example</h2>
+        Value: {{ priceSlider5 | json }}
+        <rzslider rz-slider-model="priceSlider5"
+                  rz-slider-floor="0"
+                  rz-slider-ceil="10"
+                  rz-slider-show-ticks-value="true"></rzslider>
+    </article>
+
     <article>
         <h2>Draggable range example</h2>
         Value:
@@ -131,6 +149,8 @@ <h2>Toggle slider example</h2>
 
     $scope.priceSlider2 = 150;
     $scope.priceSlider3 = 250;
+    $scope.priceSlider4 = 5;
+    $scope.priceSlider5 = 5;
 
     $scope.translate = function(value) {
       return '$' + value;

dist/rzslider.css

@@ -34,6 +34,7 @@ rzslider span.rz-base {
 
 rzslider span.rz-bar-wrapper {
   left: 0;
+  z-index: 1;
   width: 100%;
   height: 32px;
   padding-top: 16px;
@@ -43,7 +44,7 @@ rzslider span.rz-bar-wrapper {
 
 rzslider span.rz-bar {
   left: 0;
-  z-index: 0;
+  z-index: 1;
   width: 100%;
   height: 4px;
   background: #d8e0f3;
@@ -53,7 +54,7 @@ rzslider span.rz-bar {
 }
 
 rzslider span.rz-bar.rz-selection {
-  z-index: 1;
+  z-index: 2;
   background: #0db9f0;
   -webkit-border-radius: 2px;
      -moz-border-radius: 2px;
@@ -62,7 +63,7 @@ rzslider span.rz-bar.rz-selection {
 
 rzslider span.rz-pointer {
   top: -14px;
-  z-index: 2;
+  z-index: 3;
   width: 32px;
   height: 32px;
   cursor: pointer;
@@ -106,4 +107,33 @@ rzslider span.rz-bubble.rz-selection {
 
 rzslider span.rz-bubble.rz-limit {
   color: #55637d;
+}
+
+rzslider .rz-ticks {
+  position: absolute;
+  top: -3px;
+  left: 0;
+  z-index: 1;
+  display: flex;
+  width: 100%;
+  padding: 0 11px;
+  margin: 0;
+  list-style: none;
+  box-sizing: border-box;
+  justify-content: space-between;
+}
+
+rzslider .rz-ticks .tick {
+  width: 10px;
+  height: 10px;
+  text-align: center;
+  cursor: pointer;
+  background: #666666;
+  border-radius: 50%;
+}
+
+rzslider .rz-ticks .tick .tick-value {
+  position: absolute;
+  top: -30px;
+  transform: translate(-50%, 0);
 }