Add the step value on the ticks

Gruntfile.js

@@ -100,7 +100,7 @@ module.exports = function(grunt) {
         },
         watch: {
             all: {
-                files: ['dist/*'],
+                files: ['dist/*', 'demo/*'],
                 options: {
                     livereload: true
                 }

README.md

@@ -131,6 +131,10 @@ $scope.priceSlider = {
 
 > 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
 

demo/index.html

@@ -94,6 +94,15 @@
                   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:
@@ -141,6 +150,7 @@
     $scope.priceSlider2 = 150;
     $scope.priceSlider3 = 250;
     $scope.priceSlider4 = 5;
+    $scope.priceSlider5 = 5;
 
     $scope.translate = function(value) {
       return '$' + value;

dist/rzslider.css

@@ -112,18 +112,28 @@ rzslider span.rz-bubble.rz-limit {
 rzslider .rz-ticks {
   position: absolute;
   top: -3px;
+  left: 0;
   z-index: 1;
   display: flex;
-  padding: 0;
+  width: 100%;
+  padding: 0 11px;
   margin: 0;
   list-style: none;
+  box-sizing: border-box;
   justify-content: space-between;
 }
 
-rzslider .rz-ticks li {
+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);
+}
\ No newline at end of file

dist/rzslider.js

@@ -216,7 +216,14 @@ function throttle(func, wait, options) {
      *
      * @type {boolean}
      */
-    this.showTicks = attributes.rzSliderShowTicks === 'true';
+    this.showTicks = attributes.rzSliderShowTicks || attributes.rzSliderShowTicksValue;
+
+    /**
+     * Display the value on each tick.
+     *
+     * @type {boolean}
+     */
+    this.showTicksValue = attributes.rzSliderShowTicksValue;
 
     /**
      * The delta between min and max value
@@ -363,6 +370,20 @@ function throttle(func, wait, options) {
       });
       this.deRegFuncs.push(unRegFn);
 
+      unRegFn = this.scope.$watch('rzSliderShowTicks', function(newValue, oldValue)
+      {
+        if(newValue === oldValue) { return; }
+        self.resetSlider();
+      });
+      this.deRegFuncs.push(unRegFn);
+
+      unRegFn = this.scope.$watch('rzSliderShowTicksValue', function(newValue, oldValue)
+      {
+        if(newValue === oldValue) { return; }
+        self.resetSlider();
+      });
+      this.deRegFuncs.push(unRegFn);
+
       this.scope.$on('$destroy', function()
       {
         self.minH.off();
@@ -518,7 +539,6 @@ 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)
@@ -529,6 +549,17 @@ function throttle(func, wait, options) {
         this.hideEl(this.ceilLab);
       }
 
+      if(this.showTicksValue) {
+        this.flrLab.rzAlwaysHide = true;
+        this.ceilLab.rzAlwaysHide = true;
+        this.minLab.rzAlwaysHide = true;
+        this.maxLab.rzAlwaysHide = true;
+        this.hideEl(this.flrLab);
+        this.hideEl(this.ceilLab);
+        this.hideEl(this.minLab);
+        this.hideEl(this.maxLab);
+      }
+
       // Remove stuff not needed in single slider
       if(this.range === false)
       {
@@ -590,16 +621,16 @@ function throttle(func, wait, options) {
      * @returns {undefined}
      */
     updateTicksScale: function() {
+        if(!this.step) return; //if step is 0, the following loop will be endless.
+
         var positions = '';
-        for (var i = this.minValue; i < this.maxValue; i += this.step) {
-            positions += '<li></li>';
+        for (var i = this.minValue; i <= this.maxValue; i += this.step) {
+          positions += '<li class="tick">';
+          if(this.showTicksValue)
+            positions += '<span class="tick-value">'+ this.getDisplayValue(i) +'</span>';
+          positions += '</li>';
         }
-        positions += '<li></li>';
         this.ticks.html(positions);
-        this.ticks.css({
-          width: (this.barWidth - 2 * this.handleHalfWidth) + 'px',
-          left: this.handleHalfWidth + 'px'
-        });
     },
 
     /**
@@ -816,16 +847,8 @@ function throttle(func, wait, options) {
 
       if(this.minLab.rzsl + this.minLab.rzsw + 10 >= this.maxLab.rzsl)
       {
-        if(this.customTrFn)
-        {
-          lowTr = this.customTrFn(this.scope.rzSliderModel);
-          highTr = this.customTrFn(this.scope.rzSliderHigh);
-        }
-        else
-        {
-          lowTr = this.scope.rzSliderModel;
-          highTr = this.scope.rzSliderHigh;
-        }
+        lowTr = this.getDisplayValue(this.scope.rzSliderModel);
+        highTr = this.getDisplayValue(this.scope.rzSliderHigh);
 
         this.translateFn(lowTr + ' - ' + highTr, this.cmbLab, false);
         this.setLeft(this.cmbLab, this.selBar.rzsl + this.selBar.rzsw / 2 - this.cmbLab.rzsw / 2);
@@ -841,6 +864,15 @@ function throttle(func, wait, options) {
       }
     },
 
+    /**
+     * Return the translated value if a translate function is provided else the original value
+     * @param value
+     * @returns {*}
+     */
+    getDisplayValue: function(value) {
+      return  this.customTrFn ? this.customTrFn(value): value;
+    },
+
     /**
      * Round value to step and precision
      *
@@ -1304,7 +1336,8 @@ function throttle(func, wait, options) {
       rzSliderOnStart: '&',
       rzSliderOnChange: '&',
       rzSliderOnEnd: '&',
-      rzSliderShowTicks: '@'
+      rzSliderShowTicks: '=?',
+      rzSliderShowTicksValue: '=?'
     },
 
     /**

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-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%}
+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;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:#666;border-radius:50%}rzslider .rz-ticks .tick .tick-value{position:absolute;top:-30px;transform:translate(-50%,0)}
\ No newline at end of file

src/rzslider.js

@@ -216,7 +216,14 @@ function throttle(func, wait, options) {
      *
      * @type {boolean}
      */
-    this.showTicks = attributes.rzSliderShowTicks === 'true';
+    this.showTicks = attributes.rzSliderShowTicks || attributes.rzSliderShowTicksValue;
+
+    /**
+     * Display the value on each tick.
+     *
+     * @type {boolean}
+     */
+    this.showTicksValue = attributes.rzSliderShowTicksValue;
 
     /**
      * The delta between min and max value
@@ -363,6 +370,20 @@ function throttle(func, wait, options) {
       });
       this.deRegFuncs.push(unRegFn);
 
+      unRegFn = this.scope.$watch('rzSliderShowTicks', function(newValue, oldValue)
+      {
+        if(newValue === oldValue) { return; }
+        self.resetSlider();
+      });
+      this.deRegFuncs.push(unRegFn);
+
+      unRegFn = this.scope.$watch('rzSliderShowTicksValue', function(newValue, oldValue)
+      {
+        if(newValue === oldValue) { return; }
+        self.resetSlider();
+      });
+      this.deRegFuncs.push(unRegFn);
+
       this.scope.$on('$destroy', function()
       {
         self.minH.off();
@@ -518,7 +539,6 @@ 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)
@@ -529,6 +549,17 @@ function throttle(func, wait, options) {
         this.hideEl(this.ceilLab);
       }
 
+      if(this.showTicksValue) {
+        this.flrLab.rzAlwaysHide = true;
+        this.ceilLab.rzAlwaysHide = true;
+        this.minLab.rzAlwaysHide = true;
+        this.maxLab.rzAlwaysHide = true;
+        this.hideEl(this.flrLab);
+        this.hideEl(this.ceilLab);
+        this.hideEl(this.minLab);
+        this.hideEl(this.maxLab);
+      }
+
       // Remove stuff not needed in single slider
       if(this.range === false)
       {
@@ -590,16 +621,16 @@ function throttle(func, wait, options) {
      * @returns {undefined}
      */
     updateTicksScale: function() {
+        if(!this.step) return; //if step is 0, the following loop will be endless.
+
         var positions = '';
-        for (var i = this.minValue; i < this.maxValue; i += this.step) {
-            positions += '<li></li>';
+        for (var i = this.minValue; i <= this.maxValue; i += this.step) {
+          positions += '<li class="tick">';
+          if(this.showTicksValue)
+            positions += '<span class="tick-value">'+ this.getDisplayValue(i) +'</span>';
+          positions += '</li>';
         }
-        positions += '<li></li>';
         this.ticks.html(positions);
-        this.ticks.css({
-          width: (this.barWidth - 2 * this.handleHalfWidth) + 'px',
-          left: this.handleHalfWidth + 'px'
-        });
     },
 
     /**
@@ -816,16 +847,8 @@ function throttle(func, wait, options) {
 
       if(this.minLab.rzsl + this.minLab.rzsw + 10 >= this.maxLab.rzsl)
       {
-        if(this.customTrFn)
-        {
-          lowTr = this.customTrFn(this.scope.rzSliderModel);
-          highTr = this.customTrFn(this.scope.rzSliderHigh);
-        }
-        else
-        {
-          lowTr = this.scope.rzSliderModel;
-          highTr = this.scope.rzSliderHigh;
-        }
+        lowTr = this.getDisplayValue(this.scope.rzSliderModel);
+        highTr = this.getDisplayValue(this.scope.rzSliderHigh);
 
         this.translateFn(lowTr + ' - ' + highTr, this.cmbLab, false);
         this.setLeft(this.cmbLab, this.selBar.rzsl + this.selBar.rzsw / 2 - this.cmbLab.rzsw / 2);
@@ -841,6 +864,15 @@ function throttle(func, wait, options) {
       }
     },
 
+    /**
+     * Return the translated value if a translate function is provided else the original value
+     * @param value
+     * @returns {*}
+     */
+    getDisplayValue: function(value) {
+      return  this.customTrFn ? this.customTrFn(value): value;
+    },
+
     /**
      * Round value to step and precision
      *
@@ -1304,7 +1336,8 @@ function throttle(func, wait, options) {
       rzSliderOnStart: '&',
       rzSliderOnChange: '&',
       rzSliderOnEnd: '&',
-      rzSliderShowTicks: '@'
+      rzSliderShowTicks: '=?',
+      rzSliderShowTicksValue: '=?'
     },
 
     /**

src/rzslider.less

@@ -23,6 +23,9 @@
 @barFillColor: @handleBgColor;
 @barNormalColor: #d8e0f3;
 @ticksColor: #666;
+@ticksWidth: 10px;
+@ticksHeight: 10px;
+@ticksValuePosition: -30px;
 
 /* Slider size parameters */
 @handleSize: 32px;
@@ -84,10 +87,10 @@ rzslider span.rz-pointer {
   background-color: @handleBgColor;
   z-index: 3;
   .rounded(@handleSize/2);
-//  -webkit-transition:all linear 0.15s;
-//  -moz-transition:all linear 0.15s;
-//  -o-transition:all linear 0.15s;
-//  transition:all linear 0.15s;
+  //  -webkit-transition:all linear 0.15s;
+  //  -moz-transition:all linear 0.15s;
+  //  -o-transition:all linear 0.15s;
+  //  transition:all linear 0.15s;
 }
 
 rzslider span.rz-pointer:after {
@@ -125,20 +128,29 @@ rzslider span.rz-bubble.rz-limit {
 }
 
 rzslider .rz-ticks {
+  box-sizing: border-box;
+  width: 100%;
   position: absolute;
-  padding: 0;
+  left: 0;
+  top: -(@ticksHeight - @barHeight) / 2;
   margin: 0;
+  padding: 0 (@handleSize - @ticksWidth) / 2;
   z-index: 1;
   list-style: none;
   display: flex;
   justify-content: space-between;
-  top: -3px;
 
-  li {
-    width: 10px;
-    height: 10px;
+  .tick {
+    text-align: center;
+    cursor: pointer;
+    width: @ticksWidth;
+    height: @ticksHeight;
     background: @ticksColor;
     border-radius: 50%;
-    cursor: pointer;
+    .tick-value {
+      position: absolute;
+      top: @ticksValuePosition;
+      transform: translate(-50%, 0);
+    }
   }
 }