feat(ticks): Accept numbers for showTicks/showTicksValues

Thanks to this feature, you can display ticks at intermediate positions without setting a fixed step

demo/demo.js

@@ -237,6 +237,26 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
     }
   };
 
+  //Slider with ticks at intermediate positions
+  $scope.slider_ticks_at = {
+    value: 500,
+    options: {
+      ceil: 1000,
+      floor: 0,
+      showTicks: 100
+    }
+  };
+
+  //Slider with ticks and values at intermediate positions
+  $scope.slider_ticks_values_at = {
+    value: 500,
+    options: {
+      ceil: 1000,
+      floor: 0,
+      showTicksValues: 100
+    }
+  };
+
   //Slider with draggable range
   $scope.slider_draggable_range = {
     minValue: 1,

demo/index.html

@@ -181,6 +181,22 @@
     ></rzslider>
   </article>
 
+  <article>
+    <h2>Slider with ticks at intermediate positions</h2>
+    <rzslider
+      rz-slider-model="slider_ticks_at.value"
+      rz-slider-options="slider_ticks_at.options"
+    ></rzslider>
+  </article>
+
+  <article>
+    <h2>Slider with ticks and values at intermediate positions</h2>
+    <rzslider
+      rz-slider-model="slider_ticks_values_at.value"
+      rz-slider-options="slider_ticks_values_at.options"
+    ></rzslider>
+  </article>
+
   <article>
     <h2>Slider with draggable range</h2>
     <rzslider

dist/rzslider.css

@@ -159,6 +159,11 @@ rzslider .rz-ticks .rz-tick .rz-tick-value {
   transform: translate(-50%, 0);
 }
 
+rzslider .rz-ticks.rz-ticks-values-under .rz-tick-value {
+  top: initial;
+  bottom: -40px;
+}
+
 rzslider.rz-vertical {
   position: relative;
   width: 4px;
@@ -224,7 +229,13 @@ rzslider.rz-vertical .rz-ticks .rz-tick {
 }
 
 rzslider.rz-vertical .rz-ticks .rz-tick .rz-tick-value {
-  top: auto;
+  top: initial;
   left: 22px;
   transform: translate(0, -28%);
+}
+
+rzslider.rz-vertical .rz-ticks.rz-ticks-values-under .rz-tick-value {
+  right: 12px;
+  bottom: initial;
+  left: initial;
 }
\ No newline at end of file

dist/rzslider.js

 /*! angularjs-slider - v2.11.0 - 
  (c) Rafal Zajac <rzajac@gmail.com>, Valentin Hervieu <valentin@hervieu.me>, Jussi Saarivirta <jusasi@gmail.com>, Angelin Sirbu <angelin.sirbu@gmail.com> - 
  https://github.com/angular-slider/angularjs-slider - 
- 2016-04-01 */
+ 2016-04-22 */
 /*jslint unparam: true */
 /*global angular: false, console: false, define, module */
 (function(root, factory) {
@@ -247,6 +247,14 @@
        */
       this.valueRange = 0;
 
+
+      /**
+       * If showTicks/showTicksValues options are number.
+       * In this case, ticks values should be displayed below the slider.
+       * @type {boolean}
+       */
+      this.intermediateTicks = false;
+
       /**
        * Set to true if init method already executed
        *
@@ -416,6 +424,8 @@
 
         this.options.showTicks = this.options.showTicks || this.options.showTicksValues;
         this.scope.showTicks = this.options.showTicks; //scope is used in the template
+        if(angular.isNumber(this.options.showTicks))
+          this.intermediateTicks = true;
 
         this.options.showSelectionBar = this.options.showSelectionBar || this.options.showSelectionBarEnd
           || this.options.showSelectionBarFromValue !== null;
@@ -530,11 +540,14 @@
         else
           this.maxH.css('display', '');
 
+
         this.alwaysHide(this.flrLab, this.options.showTicksValues || this.options.hideLimitLabels);
         this.alwaysHide(this.ceilLab, this.options.showTicksValues || this.options.hideLimitLabels);
-        this.alwaysHide(this.minLab, this.options.showTicksValues || this.options.hidePointerLabels);
-        this.alwaysHide(this.maxLab, this.options.showTicksValues || !this.range || this.options.hidePointerLabels);
-        this.alwaysHide(this.cmbLab, this.options.showTicksValues || !this.range || this.options.hidePointerLabels);
+
+        var hideLabelsForTicks = this.options.showTicksValues && !this.intermediateTicks;
+        this.alwaysHide(this.minLab, hideLabelsForTicks || this.options.hidePointerLabels);
+        this.alwaysHide(this.maxLab, hideLabelsForTicks || !this.range || this.options.hidePointerLabels);
+        this.alwaysHide(this.cmbLab, hideLabelsForTicks || !this.range || this.options.hidePointerLabels);
         this.alwaysHide(this.selBar, !this.range && !this.options.showSelectionBar);
 
         if (this.options.vertical)
@@ -544,6 +557,9 @@
           this.selBar.addClass('rz-draggable');
         else
           this.selBar.removeClass('rz-draggable');
+
+        if(this.intermediateTicks && this.options.showTicksValues)
+          this.ticks.addClass('rz-ticks-values-under');
       },
 
       alwaysHide: function(el, hide) {
@@ -751,12 +767,13 @@
        */
       updateTicksScale: function() {
         if (!this.options.showTicks) return;
-
-        var positions = '',
-          ticksCount = Math.round((this.maxValue - this.minValue) / this.step) + 1;
+        var step = this.step;
+        if(this.intermediateTicks)
+          step = this.options.showTicks;
+        var ticksCount = Math.round((this.maxValue - this.minValue) / step) + 1;
         this.scope.ticks = [];
         for (var i = 0; i < ticksCount; i++) {
-          var value = this.roundStep(this.minValue + i * this.step);
+          var value = this.roundStep(this.minValue + i * step);
           var tick = {
             selected: this.isTickSelected(value)
           };
@@ -1077,6 +1094,7 @@
       /**
        * Return the translated value if a translate function is provided else the original value
        * @param value
+       * @param which if it's min or max handle
        * @returns {*}
        */
       getDisplayValue: function(value, which) {
@@ -1087,11 +1105,13 @@
        * Round value to step and precision based on minValue
        *
        * @param {number} value
+       * @param {number} customStep a custom step to override the defined step
        * @returns {number}
        */
-      roundStep: function(value) {
-        var steppedDifference = parseFloat((value - this.minValue) / this.step).toPrecision(12);
-        steppedDifference = Math.round(steppedDifference) * this.step;
+      roundStep: function(value, customStep) {
+        var step = customStep ? customStep : this.step,
+          steppedDifference = parseFloat((value - this.minValue) / step).toPrecision(12);
+        steppedDifference = Math.round(+steppedDifference) * step;
         var newValue = (this.minValue + steppedDifference).toFixed(this.precision);
         return +newValue;
       },
@@ -1334,7 +1354,7 @@
             this.fullBar.on('mousedown', angular.bind(this, this.onStart, null, null));
             this.fullBar.on('mousedown', angular.bind(this, this.onMove, this.fullBar));
             this.ticks.on('mousedown', angular.bind(this, this.onStart, null, null));
-            this.ticks.on('mousedown', angular.bind(this, this.onMove, this.ticks));
+            this.ticks.on('mousedown', angular.bind(this, this.onTickClick, this.ticks));
           }
         }
 
@@ -1354,7 +1374,7 @@
             this.fullBar.on('touchstart', angular.bind(this, this.onStart, null, null));
             this.fullBar.on('touchstart', angular.bind(this, this.onMove, this.fullBar));
             this.ticks.on('touchstart', angular.bind(this, this.onStart, null, null));
-            this.ticks.on('touchstart', angular.bind(this, this.onMove, this.ticks));
+            this.ticks.on('touchstart', angular.bind(this, this.onTickClick, this.ticks));
           }
         }
 
@@ -1423,9 +1443,10 @@
        *
        * @param {jqLite} pointer
        * @param {Event}  event The event
+       * @param {boolean}  fromTick if the event occured on a tick or not
        * @returns {undefined}
        */
-      onMove: function(pointer, event) {
+      onMove: function(pointer, event, fromTick) {
         var newOffset = this.getEventPosition(event),
           newValue,
           ceilValue = this.options.rightToLeft ? this.minValue : this.maxValue,
@@ -1437,7 +1458,10 @@
           newValue = ceilValue;
         } else {
           newValue = this.offsetToValue(newOffset);
-          newValue = this.roundStep(newValue);
+          if(fromTick && angular.isNumber(this.options.showTicks))
+            newValue = this.roundStep(newValue, this.options.showTicks);
+          else
+            newValue = this.roundStep(newValue);
         }
         this.positionTrackingHandle(newValue);
       },
@@ -1464,6 +1488,10 @@
         this.callOnEnd();
       },
 
+      onTickClick: function(pointer, event) {
+        this.onMove(pointer, event, true);
+      },
+
       onPointerFocus: function(pointer, ref) {
         this.tracking = ref;
         pointer.one('blur', angular.bind(this, this.onPointerBlur, pointer));

dist/rzslider.min.css

 /*! angularjs-slider - v2.11.0 -  (c) Rafal Zajac <rzajac@gmail.com>, Valentin Hervieu <valentin@hervieu.me>, Jussi Saarivirta <jusasi@gmail.com>, Angelin Sirbu <angelin.sirbu@gmail.com> -  https://github.com/angular-slider/angularjs-slider -  2016-04-01 */
-rzslider{position:relative;display:inline-block;width:100%;height:4px;margin:35px 0 15px 0;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}rzslider[disabled]{cursor:not-allowed}rzslider[disabled] .rz-pointer{cursor:not-allowed;background-color:#d8e0f3}rzslider span{position:absolute;display:inline-block;white-space:nowrap}rzslider .rz-base{width:100%;height:100%;padding:0}rzslider .rz-bar-wrapper{left:0;z-index:1;width:100%;height:32px;padding-top:16px;margin-top:-16px;box-sizing:border-box}rzslider .rz-bar-wrapper.rz-draggable{cursor:move}rzslider .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 .rz-bar.rz-selection{z-index:2;background:#0db9f0;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}rzslider .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 .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 .rz-pointer:hover:after{background-color:#fff}rzslider .rz-pointer.rz-active{z-index:4}rzslider .rz-pointer.rz-active:after{background-color:#451aff}rzslider .rz-bubble{bottom:16px;padding:1px 3px;color:#55637d;cursor:default}rzslider .rz-bubble.rz-selection{top:16px}rzslider .rz-bubble.rz-limit{color:#55637d}rzslider .rz-ticks{position:absolute;top:-3px;left:0;z-index:1;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;height:0;padding:0 11px;margin:0;list-style:none;box-sizing:border-box;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}rzslider .rz-ticks .rz-tick{width:10px;height:10px;text-align:center;cursor:pointer;background:#d8e0f3;border-radius:50%}rzslider .rz-ticks .rz-tick.rz-selected{background:#0db9f0}rzslider .rz-ticks .rz-tick .rz-tick-value{position:absolute;top:-30px;transform:translate(-50%,0)}rzslider.rz-vertical{position:relative;width:4px;height:100%;padding:0;margin:0 20px;vertical-align:baseline}rzslider.rz-vertical .rz-base{width:100%;height:100%;padding:0}rzslider.rz-vertical .rz-bar-wrapper{top:auto;left:0;width:32px;height:100%;padding:0 0 0 16px;margin:0 0 0 -16px}rzslider.rz-vertical .rz-bar{bottom:0;left:auto;width:4px;height:100%}rzslider.rz-vertical .rz-pointer{top:auto;bottom:0;left:-14px!important}rzslider.rz-vertical .rz-bubble{bottom:0;left:16px!important;margin-left:3px}rzslider.rz-vertical .rz-bubble.rz-selection{top:auto;left:16px!important}rzslider.rz-vertical .rz-ticks{top:0;left:-3px;z-index:1;width:0;height:100%;padding:11px 0;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}rzslider.rz-vertical .rz-ticks .rz-tick{vertical-align:middle}rzslider.rz-vertical .rz-ticks .rz-tick .rz-tick-value{top:auto;left:22px;transform:translate(0,-28%)}
\ No newline at end of file
+rzslider{position:relative;display:inline-block;width:100%;height:4px;margin:35px 0 15px 0;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}rzslider[disabled]{cursor:not-allowed}rzslider[disabled] .rz-pointer{cursor:not-allowed;background-color:#d8e0f3}rzslider span{position:absolute;display:inline-block;white-space:nowrap}rzslider .rz-base{width:100%;height:100%;padding:0}rzslider .rz-bar-wrapper{left:0;z-index:1;width:100%;height:32px;padding-top:16px;margin-top:-16px;box-sizing:border-box}rzslider .rz-bar-wrapper.rz-draggable{cursor:move}rzslider .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 .rz-bar.rz-selection{z-index:2;background:#0db9f0;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}rzslider .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 .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 .rz-pointer:hover:after{background-color:#fff}rzslider .rz-pointer.rz-active{z-index:4}rzslider .rz-pointer.rz-active:after{background-color:#451aff}rzslider .rz-bubble{bottom:16px;padding:1px 3px;color:#55637d;cursor:default}rzslider .rz-bubble.rz-selection{top:16px}rzslider .rz-bubble.rz-limit{color:#55637d}rzslider .rz-ticks{position:absolute;top:-3px;left:0;z-index:1;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;height:0;padding:0 11px;margin:0;list-style:none;box-sizing:border-box;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}rzslider .rz-ticks .rz-tick{width:10px;height:10px;text-align:center;cursor:pointer;background:#d8e0f3;border-radius:50%}rzslider .rz-ticks .rz-tick.rz-selected{background:#0db9f0}rzslider .rz-ticks .rz-tick .rz-tick-value{position:absolute;top:-30px;transform:translate(-50%,0)}rzslider .rz-ticks.rz-ticks-values-under .rz-tick-value{top:initial;bottom:-40px}rzslider.rz-vertical{position:relative;width:4px;height:100%;padding:0;margin:0 20px;vertical-align:baseline}rzslider.rz-vertical .rz-base{width:100%;height:100%;padding:0}rzslider.rz-vertical .rz-bar-wrapper{top:auto;left:0;width:32px;height:100%;padding:0 0 0 16px;margin:0 0 0 -16px}rzslider.rz-vertical .rz-bar{bottom:0;left:auto;width:4px;height:100%}rzslider.rz-vertical .rz-pointer{top:auto;bottom:0;left:-14px!important}rzslider.rz-vertical .rz-bubble{bottom:0;left:16px!important;margin-left:3px}rzslider.rz-vertical .rz-bubble.rz-selection{top:auto;left:16px!important}rzslider.rz-vertical .rz-ticks{top:0;left:-3px;z-index:1;width:0;height:100%;padding:11px 0;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}rzslider.rz-vertical .rz-ticks .rz-tick{vertical-align:middle}rzslider.rz-vertical .rz-ticks .rz-tick .rz-tick-value{top:initial;left:22px;transform:translate(0,-28%)}rzslider.rz-vertical .rz-ticks.rz-ticks-values-under .rz-tick-value{right:12px;bottom:initial;left:initial}
\ No newline at end of file

src/rzslider.js

@@ -251,6 +251,14 @@
        */
       this.valueRange = 0;
 
+
+      /**
+       * If showTicks/showTicksValues options are number.
+       * In this case, ticks values should be displayed below the slider.
+       * @type {boolean}
+       */
+      this.intermediateTicks = false;
+
       /**
        * Set to true if init method already executed
        *
@@ -420,6 +428,8 @@
 
         this.options.showTicks = this.options.showTicks || this.options.showTicksValues;
         this.scope.showTicks = this.options.showTicks; //scope is used in the template
+        if(angular.isNumber(this.options.showTicks))
+          this.intermediateTicks = true;
 
         this.options.showSelectionBar = this.options.showSelectionBar || this.options.showSelectionBarEnd
           || this.options.showSelectionBarFromValue !== null;
@@ -534,11 +544,14 @@
         else
           this.maxH.css('display', '');
 
+
         this.alwaysHide(this.flrLab, this.options.showTicksValues || this.options.hideLimitLabels);
         this.alwaysHide(this.ceilLab, this.options.showTicksValues || this.options.hideLimitLabels);
-        this.alwaysHide(this.minLab, this.options.showTicksValues || this.options.hidePointerLabels);
-        this.alwaysHide(this.maxLab, this.options.showTicksValues || !this.range || this.options.hidePointerLabels);
-        this.alwaysHide(this.cmbLab, this.options.showTicksValues || !this.range || this.options.hidePointerLabels);
+
+        var hideLabelsForTicks = this.options.showTicksValues && !this.intermediateTicks;
+        this.alwaysHide(this.minLab, hideLabelsForTicks || this.options.hidePointerLabels);
+        this.alwaysHide(this.maxLab, hideLabelsForTicks || !this.range || this.options.hidePointerLabels);
+        this.alwaysHide(this.cmbLab, hideLabelsForTicks || !this.range || this.options.hidePointerLabels);
         this.alwaysHide(this.selBar, !this.range && !this.options.showSelectionBar);
 
         if (this.options.vertical)
@@ -548,6 +561,9 @@
           this.selBar.addClass('rz-draggable');
         else
           this.selBar.removeClass('rz-draggable');
+
+        if(this.intermediateTicks && this.options.showTicksValues)
+          this.ticks.addClass('rz-ticks-values-under');
       },
 
       alwaysHide: function(el, hide) {
@@ -755,12 +771,13 @@
        */
       updateTicksScale: function() {
         if (!this.options.showTicks) return;
-
-        var positions = '',
-          ticksCount = Math.round((this.maxValue - this.minValue) / this.step) + 1;
+        var step = this.step;
+        if(this.intermediateTicks)
+          step = this.options.showTicks;
+        var ticksCount = Math.round((this.maxValue - this.minValue) / step) + 1;
         this.scope.ticks = [];
         for (var i = 0; i < ticksCount; i++) {
-          var value = this.roundStep(this.minValue + i * this.step);
+          var value = this.roundStep(this.minValue + i * step);
           var tick = {
             selected: this.isTickSelected(value)
           };
@@ -1081,6 +1098,7 @@
       /**
        * Return the translated value if a translate function is provided else the original value
        * @param value
+       * @param which if it's min or max handle
        * @returns {*}
        */
       getDisplayValue: function(value, which) {
@@ -1091,11 +1109,13 @@
        * Round value to step and precision based on minValue
        *
        * @param {number} value
+       * @param {number} customStep a custom step to override the defined step
        * @returns {number}
        */
-      roundStep: function(value) {
-        var steppedDifference = parseFloat((value - this.minValue) / this.step).toPrecision(12);
-        steppedDifference = Math.round(steppedDifference) * this.step;
+      roundStep: function(value, customStep) {
+        var step = customStep ? customStep : this.step,
+          steppedDifference = parseFloat((value - this.minValue) / step).toPrecision(12);
+        steppedDifference = Math.round(+steppedDifference) * step;
         var newValue = (this.minValue + steppedDifference).toFixed(this.precision);
         return +newValue;
       },
@@ -1338,7 +1358,7 @@
             this.fullBar.on('mousedown', angular.bind(this, this.onStart, null, null));
             this.fullBar.on('mousedown', angular.bind(this, this.onMove, this.fullBar));
             this.ticks.on('mousedown', angular.bind(this, this.onStart, null, null));
-            this.ticks.on('mousedown', angular.bind(this, this.onMove, this.ticks));
+            this.ticks.on('mousedown', angular.bind(this, this.onTickClick, this.ticks));
           }
         }
 
@@ -1358,7 +1378,7 @@
             this.fullBar.on('touchstart', angular.bind(this, this.onStart, null, null));
             this.fullBar.on('touchstart', angular.bind(this, this.onMove, this.fullBar));
             this.ticks.on('touchstart', angular.bind(this, this.onStart, null, null));
-            this.ticks.on('touchstart', angular.bind(this, this.onMove, this.ticks));
+            this.ticks.on('touchstart', angular.bind(this, this.onTickClick, this.ticks));
           }
         }
 
@@ -1427,9 +1447,10 @@
        *
        * @param {jqLite} pointer
        * @param {Event}  event The event
+       * @param {boolean}  fromTick if the event occured on a tick or not
        * @returns {undefined}
        */
-      onMove: function(pointer, event) {
+      onMove: function(pointer, event, fromTick) {
         var newOffset = this.getEventPosition(event),
           newValue,
           ceilValue = this.options.rightToLeft ? this.minValue : this.maxValue,
@@ -1441,7 +1462,10 @@
           newValue = ceilValue;
         } else {
           newValue = this.offsetToValue(newOffset);
-          newValue = this.roundStep(newValue);
+          if(fromTick && angular.isNumber(this.options.showTicks))
+            newValue = this.roundStep(newValue, this.options.showTicks);
+          else
+            newValue = this.roundStep(newValue);
         }
         this.positionTrackingHandle(newValue);
       },
@@ -1468,6 +1492,10 @@
         this.callOnEnd();
       },
 
+      onTickClick: function(pointer, event) {
+        this.onMove(pointer, event, true);
+      },
+
       onPointerFocus: function(pointer, ref) {
         this.tracking = ref;
         pointer.one('blur', angular.bind(this, this.onPointerBlur, pointer));

src/rzslider.less

@@ -149,6 +149,13 @@ rzslider {
         transform: translate(-50%, 0);
       }
     }
+
+    &.rz-ticks-values-under {
+      .rz-tick-value {
+        top: initial;
+        bottom: @ticksValuePosition - 10;
+      }
+    }
   }
 
   &.rz-vertical {
@@ -212,10 +219,18 @@ rzslider {
         vertical-align: middle;
         .rz-tick-value {
           left: @ticksValuePositionOnVertical;
-          top: auto;
+          top: initial;
           transform: translate(0, -28%);
         }
       }
+
+      &.rz-ticks-values-under {
+        .rz-tick-value {
+          bottom: initial;
+          left: initial;
+          right: @ticksValuePositionOnVertical - 10;
+        }
+      }
     }
   }
 }

tests/specs/mouse-controls/single-slider-horizontal-test.js

@@ -183,6 +183,26 @@
       helper.slider.callOnStart.called.should.be.true;
       helper.slider.callOnChange.called.should.be.true;
     });
+
+    it('should handle click on ticks when showTicks is an integer and move minH', function () {
+      helper.scope.slider.options.step = 1;
+      helper.scope.slider.options.showTicks = 10;
+      helper.scope.$digest();
+      sinon.spy(helper.slider, 'positionTrackingHandle');
+      sinon.spy(helper.slider, 'callOnStart');
+      sinon.spy(helper.slider, 'callOnChange');
+
+      var expectedValue = 10,
+        offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
+
+      helper.fireMousedown(helper.slider.ticks, offset);
+
+      expect(helper.scope.slider.value).to.equal(expectedValue);
+      expect(helper.slider.tracking).to.equal('rzSliderModel');
+      helper.slider.positionTrackingHandle.called.should.be.true;
+      helper.slider.callOnStart.called.should.be.true;
+      helper.slider.callOnChange.called.should.be.true;
+    });
   });
 
     describe('Right to left Mouse controls - Single Horizontal', function() {
@@ -368,6 +388,25 @@
         helper.slider.callOnChange.called.should.be.true;
       });
 
+      it('should handle click on ticks when showTicks is an integer and move minH', function() {
+        helper.scope.slider.options.step = 1;
+        helper.scope.slider.options.showTicks = 10;
+        helper.scope.$digest();
+        sinon.spy(helper.slider, 'positionTrackingHandle');
+        sinon.spy(helper.slider, 'callOnStart');
+        sinon.spy(helper.slider, 'callOnChange');
+
+        var expectedValue = 10,
+          offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
+
+        helper.fireMousedown(helper.slider.ticks, offset);
+
+        expect(helper.scope.slider.value).to.equal(expectedValue);
+        expect(helper.slider.tracking).to.equal('rzSliderModel');
+        helper.slider.positionTrackingHandle.called.should.be.true;
+        helper.slider.callOnStart.called.should.be.true;
+        helper.slider.callOnChange.called.should.be.true;
+      });
   });
 }());
 

tests/specs/mouse-controls/single-slider-vertical-test.js

@@ -186,6 +186,26 @@
       helper.slider.callOnStart.called.should.be.true;
       helper.slider.callOnChange.called.should.be.true;
     });
+
+    it('should handle click on ticks when showTicks is an integer and move minH', function() {
+      helper.scope.slider.options.step = 1;
+      helper.scope.slider.options.showTicks = 10;
+      helper.scope.$digest();
+      sinon.spy(helper.slider, 'positionTrackingHandle');
+      sinon.spy(helper.slider, 'callOnStart');
+      sinon.spy(helper.slider, 'callOnChange');
+
+      var expectedValue = 10,
+        offset = helper.slider.sliderElem.rzsp - helper.slider.valueToOffset(expectedValue) - helper.slider.handleHalfDim;
+
+      helper.fireMousedown(helper.slider.ticks, offset, true);
+
+      expect(helper.scope.slider.value).to.equal(expectedValue);
+      expect(helper.slider.tracking).to.equal('rzSliderModel');
+      helper.slider.positionTrackingHandle.called.should.be.true;
+      helper.slider.callOnStart.called.should.be.true;
+      helper.slider.callOnChange.called.should.be.true;
+    });
   });
 
   describe('Right to left Mouse controls - Single Vertical', function() {
@@ -374,6 +394,26 @@
       helper.slider.callOnStart.called.should.be.true;
       helper.slider.callOnChange.called.should.be.true;
     });
+
+    it('should handle click on ticks when showTicks is an integer and move minH', function() {
+      helper.scope.slider.options.step = 1;
+      helper.scope.slider.options.showTicks = 10;
+      helper.scope.$digest();
+      sinon.spy(helper.slider, 'positionTrackingHandle');
+      sinon.spy(helper.slider, 'callOnStart');
+      sinon.spy(helper.slider, 'callOnChange');
+
+      var expectedValue = 10,
+        offset = helper.slider.sliderElem.rzsp - helper.slider.valueToOffset(expectedValue) - helper.slider.handleHalfDim;
+
+      helper.fireMousedown(helper.slider.ticks, offset, true);
+
+      expect(helper.scope.slider.value).to.equal(expectedValue);
+      expect(helper.slider.tracking).to.equal('rzSliderModel');
+      helper.slider.positionTrackingHandle.called.should.be.true;
+      helper.slider.callOnStart.called.should.be.true;
+      helper.slider.callOnChange.called.should.be.true;
+    });
   });
 
 }());

tests/specs/options-handling-test.js

@@ -660,6 +660,18 @@
         expect(helper.slider.scope.showTicks).to.be.true;
       });
 
+      it('should set the intermediateTicks flag to true when showTicks is an integer', function() {
+        helper.scope.slider.options.showTicks = 10;
+        helper.scope.$digest();
+        expect(helper.slider.intermediateTicks).to.be.true;
+      });
+
+      it('should set the intermediateTicks flag to true when showTicksValues is an integer', function() {
+        helper.scope.slider.options.showTicksValues = 10;
+        helper.scope.$digest();
+        expect(helper.slider.intermediateTicks).to.be.true;
+      });
+
       it('should set not accept draggableRange to true when slider is a single one', function() {
         helper.scope.slider.options.draggableRange = true;
         helper.scope.$digest();

tests/specs/ticks-test.js

@@ -47,6 +47,20 @@
       expect(helper.element[0].querySelectorAll('.rz-tick')).to.have.length(11);
     });
 
+    it('should create the correct number of ticks when showTicks is an integer', function() {
+      var sliderConf = {
+        value: 50,
+        options: {
+          floor: 0,
+          ceil: 100,
+          step: 10,
+          showTicks: 20
+        }
+      };
+      helper.createSlider(sliderConf);
+      expect(helper.element[0].querySelectorAll('.rz-tick')).to.have.length(6);
+    });
+
     it('should create the correct number of ticks when showTicksValues is true', function() {
       var sliderConf = {
         value: 50,
@@ -66,6 +80,28 @@
       expect(secondTick.text()).to.equal('10');
     });
 
+    it('should create the correct number of ticks when showTicksValues is an integer', function() {
+      var sliderConf = {
+        value: 50,
+        options: {
+          floor: 0,
+          ceil: 100,
+          step: 10,
+          showTicksValues: 20
+        }
+      };
+      helper.createSlider(sliderConf);
+      expect(helper.slider.ticks.hasClass('rz-ticks-values-under')).to.be.true;
+      expect(helper.element[0].querySelectorAll('.rz-tick')).to.have.length(6);
+      expect(helper.element[0].querySelectorAll('.rz-tick-value')).to.have.length(6);
+      var firstTick = angular.element(helper.element[0].querySelectorAll('.rz-tick-value')[0]);
+      expect(firstTick.text()).to.equal('0');
+      var secondTick = angular.element(helper.element[0].querySelectorAll('.rz-tick-value')[1]);
+      expect(secondTick.text()).to.equal('20');
+      var lastTick = angular.element(helper.element[0].querySelectorAll('.rz-tick-value')[5]);
+      expect(lastTick.text()).to.equal('100');
+    });
+
     it('should set rz-selected class to ticks below the model value if showSelectionBar is true', function() {
       var sliderConf = {
         value: 50,