Add a rzSliderShowTicks attribute.

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 @@
                 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 @@
 
     $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%;
 }
\ No newline at end of file

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,6 +1007,8 @@ 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')); }
@@ -981,6 +1016,8 @@ function throttle(func, wait, options) {
       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>"
   );
 
 }]);

dist/rzslider.min.css

-/*! jusas-angularjs-slider - v0.1.32 - (c) Rafal Zajac <rzajac@gmail.com>, Jussi Saarivirta <jusasi@gmail.com>, Angelin Sirbu <angelin.sirbu@gmail.com>, https://github.com/rzajac/angularjs-slider.git - 2015-09-24 */
-rzslider{position:relative;display:inline-block;width:100%;height:4px;margin:30px 0 15px 0;vertical-align:middle}rzslider span{position:absolute;display:inline-block;white-space:nowrap}rzslider span.rz-base{width:100%;height:100%;padding:0}rzslider span.rz-bar-wrapper{left:0;width:100%;height:32px;padding-top:16px;margin-top:-16px;box-sizing:border-box}rzslider span.rz-bar{left:0;z-index:0;width:100%;height:4px;background:#d8e0f3;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}rzslider span.rz-bar.rz-selection{z-index:1;background:#0db9f0;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}rzslider span.rz-pointer{top:-14px;z-index:2;width:32px;height:32px;cursor:pointer;background-color:#0db9f0;-webkit-border-radius:16px;-moz-border-radius:16px;border-radius:16px}rzslider span.rz-pointer:after{position:absolute;top:12px;left:12px;width:8px;height:8px;background:#fff;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;content:''}rzslider span.rz-pointer:hover:after{background-color:#fff}rzslider span.rz-pointer.rz-active:after{background-color:#451aff}rzslider span.rz-bubble{top:-32px;padding:1px 3px;color:#55637d;cursor:default}rzslider span.rz-bubble.rz-selection{top:16px}rzslider span.rz-bubble.rz-limit{color:#55637d}
+/*! jusas-angularjs-slider - v0.1.32 - (c) Rafal Zajac <rzajac@gmail.com>, Jussi Saarivirta <jusasi@gmail.com>, Angelin Sirbu <angelin.sirbu@gmail.com>, https://github.com/rzajac/angularjs-slider.git - 2015-10-02 */
+rzslider{position:relative;display:inline-block;width:100%;height:4px;margin:30px 0 15px 0;vertical-align:middle}rzslider span{position:absolute;display:inline-block;white-space:nowrap}rzslider span.rz-base{width:100%;height:100%;padding:0}rzslider span.rz-bar-wrapper{left:0;z-index:1;width:100%;height:32px;padding-top:16px;margin-top:-16px;box-sizing:border-box}rzslider span.rz-bar{left:0;z-index:1;width:100%;height:4px;background:#d8e0f3;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}rzslider span.rz-bar.rz-selection{z-index:2;background:#0db9f0;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}rzslider span.rz-pointer{top:-14px;z-index:3;width:32px;height:32px;cursor:pointer;background-color:#0db9f0;-webkit-border-radius:16px;-moz-border-radius:16px;border-radius:16px}rzslider span.rz-pointer:after{position:absolute;top:12px;left:12px;width:8px;height:8px;background:#fff;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;content:''}rzslider span.rz-pointer:hover:after{background-color:#fff}rzslider span.rz-pointer.rz-active:after{background-color:#451aff}rzslider span.rz-bubble{top:-32px;padding:1px 3px;color:#55637d;cursor:default}rzslider span.rz-bubble.rz-selection{top:16px}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:#666;border-radius:50%}
\ No newline at end of file

src/rzSliderTpl.html

@@ -6,4 +6,5 @@
 <span class="rz-bubble rz-limit"></span> <!-- // 5 Ceiling label -->
 <span class="rz-bubble"></span> <!-- // 6 Label above left slider handle -->
 <span class="rz-bubble"></span> <!-- // 7 Label above right slider handle -->
-<span class="rz-bubble"></span> <!-- // 8 Range label when the slider handles are close ex. 15 - 17 -->
+<span class="rz-bubble"></span> <!-- // 8 Range label when the slider handles are close ex. 15 - 17 -->
\ No newline at end of file
+<ul class="rz-ticks"></ul> <!-- // 9 The ticks -->
\ No newline at end of file

src/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,6 +1007,8 @@ 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')); }
@@ -981,6 +1016,8 @@ function throttle(func, wait, options) {
       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: '@'
     },
 
     /**

src/rzslider.less

@@ -22,6 +22,7 @@
 @limitLabelTextColor: @labelTextColor;
 @barFillColor: @handleBgColor;
 @barNormalColor: #d8e0f3;
+@ticksColor: #666;
 
 /* Slider size parameters */
 @handleSize: 32px;
@@ -57,19 +58,20 @@ rzslider span.rz-bar-wrapper {
   padding-top: @handleSize / 2;
   width: 100%;
   height: @handleSize;
+  z-index: 1;
 }
 
 rzslider span.rz-bar {
   left: 0;
   width: 100%;
   height: @barHeight;
-  z-index: 0;
+  z-index: 1;
   background: @barNormalColor;
   .rounded(@barHeight/2);
 }
 
 rzslider span.rz-bar.rz-selection {
-  z-index: 1;
+  z-index: 2;
   background: @barFillColor;
   .rounded(@barHeight/2);
 }
@@ -80,7 +82,7 @@ rzslider span.rz-pointer {
   height: @handleSize;
   top: -@handleSize/2 + @barHeight/2;
   background-color: @handleBgColor;
-  z-index: 2;
+  z-index: 3;
   .rounded(@handleSize/2);
 //  -webkit-transition:all linear 0.15s;
 //  -moz-transition:all linear 0.15s;
@@ -121,3 +123,22 @@ rzslider span.rz-bubble.rz-selection {
 rzslider span.rz-bubble.rz-limit {
   color: @limitLabelTextColor;
 }
+
+rzslider .rz-ticks {
+  position: absolute;
+  padding: 0;
+  margin: 0;
+  z-index: 1;
+  list-style: none;
+  display: flex;
+  justify-content: space-between;
+  top: -3px;
+
+  li {
+    width: 10px;
+    height: 10px;
+    background: @ticksColor;
+    border-radius: 50%;
+    cursor: pointer;
+  }
+}