Add a rzSliderShowTicks attribute.

Author: Valentin Hervieu

README.md

@@ -127,6 +127,10 @@ $scope.priceSlider = {
 
 > Function to be called when a slider update is ended.
 
+**rz-slider-show-ticks**
+
+> Display a tick for each value.
+
 ```javascript
 // In your controller
 
@@ -155,7 +159,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,15 @@ <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>Draggable range example</h2>
         Value:
@@ -131,6 +140,7 @@ <h2>Toggle slider example</h2>
 
     $scope.priceSlider2 = 150;
     $scope.priceSlider3 = 250;
+    $scope.priceSlider4 = 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,23 @@ rzslider span.rz-bubble.rz-selection {
 
 rzslider span.rz-bubble.rz-limit {
   color: #55637d;
+}
+
+rzslider .rz-ticks {
+  position: absolute;
+  top: -3px;
+  z-index: 1;
+  display: flex;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  justify-content: space-between;
+}
+
+rzslider .rz-ticks li {
+  width: 10px;
+  height: 10px;
+  cursor: pointer;
+  background: #666666;
+  border-radius: 50%;
 }

dist/rzslider.js

@@ -211,6 +211,13 @@ function throttle(func, wait, options) {
      */
     this.presentOnly = attributes.rzSliderPresentOnly === 'true';
 
+    /**
+     * Display ticks on each possible value.
+     *
+     * @type {boolean}
+     */
+    this.showTicks = attributes.rzSliderShowTicks === 'true';
+
     /**
      * The delta between min and max value
      *
@@ -249,6 +256,7 @@ function throttle(func, wait, options) {
     this.minLab =  null;  // Label above the low value
     this.maxLab = null;   // Label above the high value
     this.cmbLab = null;   // Combined label
+    this.ticks = null;  // The ticks
 
     // Initialize slider
     this.init();
@@ -281,6 +289,8 @@ function throttle(func, wait, options) {
         self.updateFloorLab();
         self.initHandles();
         if (!self.presentOnly) { self.bindEvents(); }
+        if(self.showTicks)
+          self.updateTicksScale();
       });
 
       // Recalculate slider view dimensions
@@ -359,6 +369,7 @@ function throttle(func, wait, options) {
         self.maxH.off();
         self.fullBar.off();
         self.selBar.off();
+        self.ticks.off();
         angular.element($window).off('resize', calcDimFn);
         self.deRegFuncs.map(function(unbind) { unbind(); });
       });
@@ -493,6 +504,7 @@ function throttle(func, wait, options) {
           case 6: this.minLab = jElem; break;
           case 7: this.maxLab = jElem; break;
           case 8: this.cmbLab = jElem; break;
+          case 9: this.ticks = jElem; break;
         }
 
       }, this);
@@ -506,6 +518,7 @@ function throttle(func, wait, options) {
       this.minLab.rzsl = 0;
       this.maxLab.rzsl = 0;
       this.cmbLab.rzsl = 0;
+      this.ticks.rzsl = 0;
 
       // Hide limit labels
       if(this.hideLimitLabels)
@@ -561,6 +574,8 @@ function throttle(func, wait, options) {
 
       this.getWidth(this.sliderElem);
       this.sliderElem.rzsl = this.sliderElem[0].getBoundingClientRect().left;
+      if(this.showTicks)
+        this.updateTicksScale();
 
       if(this.initHasRun)
       {
@@ -569,6 +584,24 @@ function throttle(func, wait, options) {
       }
     },
 
+    /**
+     * Update the ticks position
+     *
+     * @returns {undefined}
+     */
+    updateTicksScale: function() {
+        var positions = '';
+        for (var i = this.minValue; i < this.maxValue; i += this.step) {
+            positions += '<li></li>';
+        }
+        positions += '<li></li>';
+        this.ticks.html(positions);
+        this.ticks.css({
+          width: (this.barWidth - 2 * this.handleHalfWidth) + 'px',
+          left: this.handleHalfWidth + 'px'
+        });
+    },
+
     /**
      * Update position of the ceiling label
      *
@@ -974,13 +1007,17 @@ function throttle(func, wait, options) {
       this.fullBar.on('mousedown', angular.bind(this, this.onMove, this.fullBar));
       this.selBar.on('mousedown', angular.bind(this, barStart, null, barTracking));
       this.selBar.on('mousedown', angular.bind(this, barMove, this.selBar));
+      this.ticks.on('mousedown', angular.bind(this, this.onStart, null, null));
+      this.ticks.on('mousedown', angular.bind(this, this.onMove, this.ticks));
 
       this.minH.on('touchstart', angular.bind(this, this.onStart, this.minH, 'rzSliderModel'));
       if(this.range) { this.maxH.on('touchstart', angular.bind(this, this.onStart, this.maxH, 'rzSliderHigh')); }
       this.fullBar.on('touchstart', angular.bind(this, this.onStart, null, null));
       this.fullBar.on('touchstart', angular.bind(this, this.onMove, this.fullBar));
       this.selBar.on('touchstart', angular.bind(this, barStart, null, barTracking));
       this.selBar.on('touchstart', angular.bind(this, barMove, this.selBar));
+      this.ticks.on('touchstart', angular.bind(this, this.onStart, null, null));
+      this.ticks.on('touchstart', angular.bind(this, this.onMove, this.ticks));
     },
 
     /**
@@ -1266,7 +1303,8 @@ function throttle(func, wait, options) {
       rzSliderPresentOnly: '@',
       rzSliderOnStart: '&',
       rzSliderOnChange: '&',
-      rzSliderOnEnd: '&'
+      rzSliderOnEnd: '&',
+      rzSliderShowTicks: '@'
     },
 
     /**
@@ -1325,7 +1363,7 @@ function throttle(func, wait, options) {
   'use strict';
 
   $templateCache.put('rzSliderTpl.html',
-    "<span class=rz-bar-wrapper><span class=rz-bar></span></span> <span class=rz-bar-wrapper><span class=\"rz-bar rz-selection\"></span></span> <span class=rz-pointer></span> <span class=rz-pointer></span> <span class=\"rz-bubble rz-limit\"></span> <span class=\"rz-bubble rz-limit\"></span> <span class=rz-bubble></span> <span class=rz-bubble></span> <span class=rz-bubble></span>"
+    "<span class=rz-bar-wrapper><span class=rz-bar></span></span> <span class=rz-bar-wrapper><span class=\"rz-bar rz-selection\"></span></span> <span class=rz-pointer></span> <span class=rz-pointer></span> <span class=\"rz-bubble rz-limit\"></span> <span class=\"rz-bubble rz-limit\"></span> <span class=rz-bubble></span> <span class=rz-bubble></span> <span class=rz-bubble></span><ul class=rz-ticks></ul>"
   );
 
 }]);