feat(ticks): Refactor ticks to improve flexibility (#426)

feat(ticks): Refactor ticks to improve flexibility

.gitignore

@@ -3,3 +3,4 @@ node_modules/
 bower_components/
 temp/
 tests/coverage/
+yarn.lock

CHANGELOG.md

+# 5.6.0 (2016-10-16)
+## Features
+- Add an `ticksArray` to display ticks at specific positions (#426).
+
+To enable this new feature, the way the ticks are rendered has been changed. Now each tick is positioned absolutely using a `transform: translate()` instruction.
+
 # 5.5.1 (2016-09-22)
 ## Fix
 - Prevent losing focus when slider is rerendered (#415).
 
 # 5.5.0 (2016-09-06)
 ## Features
-- Add an autoHideLimitLabels to disable the auto-hiding of limit labels (#405).
+- Add an `autoHideLimitLabels` to disable the auto-hiding of limit labels (#405).
 
 # 5.4.3 (2016-08-07)
 ## Fix

README.md

@@ -220,6 +220,7 @@ The default options are:
     interval: 350,
     showTicks: false,
     showTicksValues: false,
+    ticksArray: null,
     ticksTooltip: null,
     ticksValuesTooltip: null,
     vertical: false,
@@ -340,6 +341,8 @@ Just pass an array with each slider value and that's it; the floor, ceil and ste
 
 **showTicksValues** - _Boolean or Number (defaults to false)_: Set to true to display a tick and the step value for each step of the slider. Set a number to display ticks and the step value at intermediate positions. This number corresponds to the step between each tick.
 
+**ticksArray** - _Array (defaults to null)_: Use to display ticks at specific positions. The array contains the index of the ticks that should be displayed. For example, [0, 1, 5] will display a tick for the first, second and sixth values.
+
 **ticksTooltip** - _Function(value) (defaults to null)_: (requires angular-ui bootstrap) Used to display a tooltip when a tick is hovered. Set to a function that returns the tooltip content for a given value.
 
 **ticksValuesTooltip** - _Function(value) (defaults to null)_: Same as `ticksTooltip` but for ticks values.

demo/demo.js

@@ -127,27 +127,6 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
     }
   };
 
-  //Slider with custom tick formatting
-  $scope.slider_tick_color = {
-    value: 0,
-    options: {
-      ceil: 1200,
-      floor: 0,
-      step: 50,
-      showSelectionBar: true,
-      showTicks: true,
-      getTickColor: function(value){
-        if (value < 300)
-          return 'red';
-        if (value < 600)
-          return 'orange';
-        if (value < 900)
-          return 'yellow';
-        return '#2AE02A';
-      }
-    }
-  };
-
   //Slider config with floor, ceil and step
   $scope.slider_floor_ceil = {
     value: 12,
@@ -228,15 +207,6 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
       }
     }
   };
-  //Slider config with angular directive inside custom template
-  $scope.slider_custom_directive_inside_template = {
-    minValue: 20,
-    maxValue: 80,
-    options: {
-      floor: 0,
-      ceil: 100
-    }
-  };
 
   //Slider config with steps array of letters
   $scope.slider_alphabet = {
@@ -256,6 +226,17 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
     }
   };
 
+  //Slider with ticks at specific positions
+  $scope.slider_ticks_array = {
+    value: 5,
+    options: {
+      ceil: 10,
+      floor: 0,
+      ticksArray: [0, 1, 3, 8, 10],
+      showTicksValues: true
+    }
+  };
+
   //Slider with ticks and tooltip
   $scope.slider_ticks_tooltip = {
     value: 5,
@@ -332,6 +313,27 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
     }
   };
 
+  //Slider with custom tick formatting
+  $scope.slider_tick_color = {
+    value: 0,
+    options: {
+      ceil: 1200,
+      floor: 0,
+      step: 50,
+      showSelectionBar: true,
+      showTicks: true,
+      getTickColor: function(value){
+        if (value < 300)
+          return 'red';
+        if (value < 600)
+          return 'orange';
+        if (value < 900)
+          return 'yellow';
+        return '#2AE02A';
+      }
+    }
+  };
+
   //Slider with draggable range
   $scope.slider_draggable_range = {
     minValue: 1,
@@ -378,7 +380,8 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
       floor: 0,
       ceil: 10,
       vertical: true,
-      showTicks: true
+      ticksArray: [0, 1, 5, 10],
+      showTicksValues: true
     }
   };
   $scope.verticalSlider4 = {
@@ -519,6 +522,15 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
     });
   };
 
+  //Slider config with angular directive inside custom template
+  $scope.slider_custom_directive_inside_template = {
+    minValue: 20,
+    maxValue: 80,
+    options: {
+      floor: 0,
+      ceil: 100
+    }
+  };
 
   //Slider with draggable range
   $scope.slider_all_options = {

demo/index.html

@@ -111,14 +111,6 @@
     ></rzslider>
   </article>
 
-  <article>
-    <h2>Slider with dynamic tick color</h2>
-    <rzslider
-      rz-slider-model="slider_tick_color.value"
-      rz-slider-options="slider_tick_color.options"
-    ></rzslider>
-  </article>
-
   <article>
     <h2>Slider with custom floor/ceil/step</h2>
     <rzslider
@@ -165,16 +157,6 @@
     ></rzslider>
   </article>
 
-  <article>
-    <h2>Slider with angular directive inside custom template</h2>
-    <rzslider
-            rz-slider-model="slider_custom_directive_inside_template.minValue"
-            rz-slider-high="slider_custom_directive_inside_template.maxValue"
-            rz-slider-options="slider_custom_directive_inside_template.options"
-            rz-slider-tpl-url="directiveInCustomTemplate.html"
-    ></rzslider>
-  </article>
-
   <article>
     <h2>Slider with Alphabet</h2>
     Current letter: {{ slider_alphabet.value }}
@@ -192,6 +174,14 @@
     ></rzslider>
   </article>
 
+  <article>
+    <h2>Slider with ticks at specific positions</h2>
+    <rzslider
+      rz-slider-model="slider_ticks_array.value"
+      rz-slider-options="slider_ticks_array.options"
+    ></rzslider>
+  </article>
+
   <article>
     <h2>Slider with ticks and tooltips</h2>
     <rzslider
@@ -242,6 +232,14 @@
     ></rzslider>
   </article>
 
+  <article>
+    <h2>Slider with dynamic tick color</h2>
+    <rzslider
+      rz-slider-model="slider_tick_color.value"
+      rz-slider-options="slider_tick_color.options"
+    ></rzslider>
+  </article>
+
   <article>
     <h2>Slider with draggable range</h2>
     <rzslider
@@ -338,6 +336,16 @@
     </tabset>
   </article>
 
+  <article>
+    <h2>Slider with angular directive inside custom template</h2>
+    <rzslider
+      rz-slider-model="slider_custom_directive_inside_template.minValue"
+      rz-slider-high="slider_custom_directive_inside_template.maxValue"
+      rz-slider-options="slider_custom_directive_inside_template.options"
+      rz-slider-tpl-url="directiveInCustomTemplate.html"
+    ></rzslider>
+  </article>
+
   <article>
     <h2>Slider with all options demo</h2>
     <div class="row all-options">

dist/rzslider.css

 /*! angularjs-slider - v5.5.1 - 
  (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-09-22 */
+ 2016-10-16 */
 .rzslider {
   position: relative;
   display: inline-block;
@@ -130,23 +130,20 @@
   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 {
+  position: absolute;
+  top: 0;
+  left: 0;
   width: 10px;
   height: 10px;
+  margin-left: 11px;
   text-align: center;
   cursor: pointer;
   background: #d8e0f3;
@@ -173,7 +170,7 @@
 
 .rzslider .rz-ticks.rz-ticks-values-under .rz-tick-value {
   top: initial;
-  bottom: -40px;
+  bottom: -32px;
 }
 
 .rzslider.rz-vertical {
@@ -230,19 +227,17 @@
   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 {
+  margin-top: 11px;
+  margin-left: auto;
   vertical-align: middle;
 }
 
 .rzslider.rz-vertical .rz-ticks .rz-tick .rz-tick-value {
   top: initial;
-  left: 22px;
+  left: 24px;
   transform: translate(0, -28%);
 }
 
@@ -255,7 +250,7 @@
 }
 
 .rzslider.rz-vertical .rz-ticks.rz-ticks-values-under .rz-tick-value {
-  right: 12px;
+  right: 24px;
   bottom: initial;
   left: initial;
 }
\ No newline at end of file

dist/rzslider.js

 /*! angularjs-slider - v5.5.1 - 
  (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-09-22 */
+ 2016-10-16 */
 /*jslint unparam: true */
 /*global angular: false, console: false, define, module */
 (function(root, factory) {
@@ -54,6 +54,7 @@
       interval: 350,
       showTicks: false,
       showTicksValues: false,
+      ticksArray: null,
       ticksTooltip: null,
       ticksValuesTooltip: null,
       vertical: false,
@@ -542,9 +543,9 @@
           this.options.draggableRange = true;
         }
 
-        this.options.showTicks = this.options.showTicks || this.options.showTicksValues;
+        this.options.showTicks = this.options.showTicks || this.options.showTicksValues || !!this.options.ticksArray;
         this.scope.showTicks = this.options.showTicks; //scope is used in the template
-        if (angular.isNumber(this.options.showTicks))
+        if (angular.isNumber(this.options.showTicks) || this.options.ticksArray)
           this.intermediateTicks = true;
 
         this.options.showSelectionBar = this.options.showSelectionBar || this.options.showSelectionBarEnd
@@ -926,6 +927,10 @@
           this.updateFloorLab();
           this.updateCeilLab();
           this.initHandles();
+          var self = this;
+          $timeout(function() {
+            self.updateTicksScale();
+          });
         }
       },
 
@@ -936,48 +941,61 @@
        */
       updateTicksScale: function() {
         if (!this.options.showTicks) return;
-        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 * step);
+
+        var ticksArray = this.options.ticksArray || this.getTicksArray(),
+          translate = this.options.vertical ? 'translateY' : 'translateX',
+          self = this;
+
+        if(this.options.rightToLeft)
+          ticksArray.reverse();
+
+        this.scope.ticks = ticksArray.map(function(value){
+          var offset = self.valueToOffset(value);
+
+          if (self.options.vertical)
+            offset = self.maxPos - offset;
+
           var tick = {
-            selected: this.isTickSelected(value)
-          };
-          if (tick.selected && this.options.getSelectionBarColor) {
-            tick.style = {
-              'background-color': this.getSelectionBarColor()
-            };
+            selected: self.isTickSelected(value),
+            style: {
+              transform: translate + '(' + offset + 'px)'
             }
-          if (!tick.selected && this.options.getTickColor) {
-            tick.style = {
-              'background-color': this.getTickColor(value)
+          };
+          if (tick.selected && self.options.getSelectionBarColor) {
+            tick.style['background-color'] = self.getSelectionBarColor();
           }
+          if (!tick.selected && self.options.getTickColor) {
+            tick.style['background-color'] = self.getTickColor(value);
           }
-          if (this.options.ticksTooltip) {
-            tick.tooltip = this.options.ticksTooltip(value);
-            tick.tooltipPlacement = this.options.vertical ? 'right' : 'top';
+          if (self.options.ticksTooltip) {
+            tick.tooltip = self.options.ticksTooltip(value);
+            tick.tooltipPlacement = self.options.vertical ? 'right' : 'top';
           }
-          if (this.options.showTicksValues) {
-            tick.value = this.getDisplayValue(value, 'tick-value');
-            if (this.options.ticksValuesTooltip) {
-              tick.valueTooltip = this.options.ticksValuesTooltip(value);
-              tick.valueTooltipPlacement = this.options.vertical ? 'right' : 'top';
+          if (self.options.showTicksValues) {
+            tick.value = self.getDisplayValue(value, 'tick-value');
+            if (self.options.ticksValuesTooltip) {
+              tick.valueTooltip = self.options.ticksValuesTooltip(value);
+              tick.valueTooltipPlacement = self.options.vertical ? 'right' : 'top';
             }
           }
-          if (this.getLegend) {
-            var legend = this.getLegend(value, this.options.id);
+          if (self.getLegend) {
+            var legend = self.getLegend(value, self.options.id);
             if (legend)
               tick.legend = legend;
           }
-          if (!this.options.rightToLeft) {
-            this.scope.ticks.push(tick);
-          } else {
-            this.scope.ticks.unshift(tick);
-          }
+          return tick;
+        });
+      },
+
+      getTicksArray: function() {
+        var step = this.step,
+          ticksArray = [];
+        if (this.intermediateTicks)
+          step = this.options.showTicks;
+        for (var value = this.minValue; value <= this.maxValue; value += step) {
+          ticksArray.push(value);
         }
+        return ticksArray;
       },
 
       isTickSelected: function(value) {

dist/rzslider.min.css

-/*! angularjs-slider - v5.5.1 -  (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-09-22 */
-.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.with-legend{margin-bottom:40px}.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-tick .rz-tick-legend{position:absolute;top:24px;max-width:50px;white-space:normal;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-tick .rz-tick-legend{top:initial;right:24px;max-width:none;white-space:nowrap;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
+/*! angularjs-slider - v5.5.1 -  (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-10-16 */
+.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.with-legend{margin-bottom:40px}.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;width:100%;height:0;margin:0;list-style:none;box-sizing:border-box}.rzslider .rz-ticks .rz-tick{position:absolute;top:0;left:0;width:10px;height:10px;margin-left:11px;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-tick .rz-tick-legend{position:absolute;top:24px;max-width:50px;white-space:normal;transform:translate(-50%,0)}.rzslider .rz-ticks.rz-ticks-values-under .rz-tick-value{top:initial;bottom:-32px}.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%}.rzslider.rz-vertical .rz-ticks .rz-tick{margin-top:11px;margin-left:auto;vertical-align:middle}.rzslider.rz-vertical .rz-ticks .rz-tick .rz-tick-value{top:initial;left:24px;transform:translate(0,-28%)}.rzslider.rz-vertical .rz-ticks .rz-tick .rz-tick-legend{top:initial;right:24px;max-width:none;white-space:nowrap;transform:translate(0,-28%)}.rzslider.rz-vertical .rz-ticks.rz-ticks-values-under .rz-tick-value{right:24px;bottom:initial;left:initial}
\ No newline at end of file

package.json

@@ -38,13 +38,13 @@
     "grunt-recess": "~0.4.0",
     "grunt-replace": "^0.11.0",
     "grunt-serve": "^0.1.6",
-    "karma": "^0.13.15",
+    "karma": "^1.3.0",
     "karma-chai": "^0.1.0",
     "karma-chrome-launcher": "^0.2.2",
     "karma-coverage": "^0.5.3",
     "karma-mocha": "^0.2.1",
     "karma-ng-html2js-preprocessor": "^0.2.0",
-    "karma-phantomjs-launcher": "^0.2.1",
+    "karma-phantomjs-launcher": "^1.0.2",
     "karma-sinon": "^1.0.4",
     "mocha": "^2.3.4",
     "phantomjs": "^1.9.19",

src/rzslider.js

@@ -58,6 +58,7 @@
       interval: 350,
       showTicks: false,
       showTicksValues: false,
+      ticksArray: null,
       ticksTooltip: null,
       ticksValuesTooltip: null,
       vertical: false,
@@ -546,9 +547,9 @@
           this.options.draggableRange = true;
         }
 
-        this.options.showTicks = this.options.showTicks || this.options.showTicksValues;
+        this.options.showTicks = this.options.showTicks || this.options.showTicksValues || !!this.options.ticksArray;
         this.scope.showTicks = this.options.showTicks; //scope is used in the template
-        if (angular.isNumber(this.options.showTicks))
+        if (angular.isNumber(this.options.showTicks) || this.options.ticksArray)
           this.intermediateTicks = true;
 
         this.options.showSelectionBar = this.options.showSelectionBar || this.options.showSelectionBarEnd
@@ -930,6 +931,10 @@
           this.updateFloorLab();
           this.updateCeilLab();
           this.initHandles();
+          var self = this;
+          $timeout(function() {
+            self.updateTicksScale();
+          });
         }
       },
 
@@ -940,48 +945,61 @@
        */
       updateTicksScale: function() {
         if (!this.options.showTicks) return;
-        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 * step);
+
+        var ticksArray = this.options.ticksArray || this.getTicksArray(),
+          translate = this.options.vertical ? 'translateY' : 'translateX',
+          self = this;
+
+        if(this.options.rightToLeft)
+          ticksArray.reverse();
+
+        this.scope.ticks = ticksArray.map(function(value){
+          var offset = self.valueToOffset(value);
+
+          if (self.options.vertical)
+            offset = self.maxPos - offset;
+
           var tick = {
-            selected: this.isTickSelected(value)
-          };
-          if (tick.selected && this.options.getSelectionBarColor) {
-            tick.style = {
-              'background-color': this.getSelectionBarColor()
-            };
+            selected: self.isTickSelected(value),
+            style: {
+              transform: translate + '(' + offset + 'px)'
             }
-          if (!tick.selected && this.options.getTickColor) {
-            tick.style = {
-              'background-color': this.getTickColor(value)
+          };
+          if (tick.selected && self.options.getSelectionBarColor) {
+            tick.style['background-color'] = self.getSelectionBarColor();
           }
+          if (!tick.selected && self.options.getTickColor) {
+            tick.style['background-color'] = self.getTickColor(value);
           }
-          if (this.options.ticksTooltip) {
-            tick.tooltip = this.options.ticksTooltip(value);
-            tick.tooltipPlacement = this.options.vertical ? 'right' : 'top';
+          if (self.options.ticksTooltip) {
+            tick.tooltip = self.options.ticksTooltip(value);
+            tick.tooltipPlacement = self.options.vertical ? 'right' : 'top';
           }
-          if (this.options.showTicksValues) {
-            tick.value = this.getDisplayValue(value, 'tick-value');
-            if (this.options.ticksValuesTooltip) {
-              tick.valueTooltip = this.options.ticksValuesTooltip(value);
-              tick.valueTooltipPlacement = this.options.vertical ? 'right' : 'top';
+          if (self.options.showTicksValues) {
+            tick.value = self.getDisplayValue(value, 'tick-value');
+            if (self.options.ticksValuesTooltip) {
+              tick.valueTooltip = self.options.ticksValuesTooltip(value);
+              tick.valueTooltipPlacement = self.options.vertical ? 'right' : 'top';
             }
           }
-          if (this.getLegend) {
-            var legend = this.getLegend(value, this.options.id);
+          if (self.getLegend) {
+            var legend = self.getLegend(value, self.options.id);
             if (legend)
               tick.legend = legend;
           }
-          if (!this.options.rightToLeft) {
-            this.scope.ticks.push(tick);
-          } else {
-            this.scope.ticks.unshift(tick);
-          }
+          return tick;
+        });
+      },
+
+      getTicksArray: function() {
+        var step = this.step,
+          ticksArray = [];
+        if (this.intermediateTicks)
+          step = this.options.showTicks;
+        for (var value = this.minValue; value <= this.maxValue; value += step) {
+          ticksArray.push(value);
         }
+        return ticksArray;
       },
 
       isTickSelected: function(value) {

src/rzslider.less

@@ -127,15 +127,8 @@
     left: 0;
     top: -(@ticksHeight - @barDimension) / 2;
     margin: 0;
-    padding: 0 (@handleSize - @ticksWidth) / 2;
     z-index: 1;
     list-style: none;
-    display: -webkit-flex;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-justify-content: space-between;
-    -ms-flex-pack: justify;
-    justify-content: space-between;
 
     .rz-tick {
       text-align: center;
@@ -144,6 +137,10 @@
       height: @ticksHeight;
       background: @ticksColor;
       border-radius: 50%;
+      position: absolute;
+      top: 0;
+      left: 0;
+      margin-left: @handleSize / 2 - @ticksWidth / 2; // for centering
       &.rz-selected {
         background: @selectedTicksColor;
       }
@@ -164,7 +161,7 @@
     &.rz-ticks-values-under {
       .rz-tick-value {
         top: initial;
-        bottom: @ticksValuePosition - 10;
+        bottom: @ticksValuePosition - 2;
       }
     }
   }
@@ -220,14 +217,12 @@
       width: 0;
       left: -(@ticksHeight - @barDimension) / 2;
       top: 0;
-      padding: (@handleSize - @ticksWidth) / 2 0;
       z-index: 1;
-      -webkit-flex-direction: column-reverse;
-      -ms-flex-direction: column-reverse;
-      flex-direction: column-reverse;
 
       .rz-tick {
         vertical-align: middle;
+        margin-left: auto;
+        margin-top: @handleSize / 2 - @ticksWidth / 2; // for centering
         .rz-tick-value {
           left: @ticksValuePositionOnVertical;
           top: initial;
@@ -246,7 +241,7 @@
         .rz-tick-value {
           bottom: initial;
           left: initial;
-          right: @ticksValuePositionOnVertical - 10;
+          right: @ticksValuePositionOnVertical;
         }
       }
     }

src/variables.less

@@ -20,7 +20,7 @@
 @ticksHeight: 10px;
 @ticksValuePosition: -30px;
 @ticksLegendPosition: 24px;
-@ticksValuePositionOnVertical: 22px;
+@ticksValuePositionOnVertical: 24px;
 
 @handleSize: 32px;
 @handlePointerSize: 8px;

tests/specs/ticks-test.js

@@ -141,6 +141,47 @@
       expect(lastTick.text()).to.equal('100');
     });
 
+    it('should create the correct number of ticks when ticksArray is used', function() {
+      var sliderConf = {
+        value: 50,
+        options: {
+          floor: 0,
+          ceil: 100,
+          step: 10,
+          ticksArray: [0, 25, 50, 100]
+        }
+      };
+      helper.createSlider(sliderConf);
+      expect(helper.slider.ticks.hasClass('rz-ticks-values-under')).to.be.false;
+      expect(helper.element[0].querySelectorAll('.rz-tick')).to.have.length(4);
+      expect(helper.element[0].querySelectorAll('.rz-tick-value')).to.have.length(0);
+    });
+
+    it('should create the correct number of ticks when ticksArray is used along with showTicksValues', function() {
+      var sliderConf = {
+        value: 50,
+        options: {
+          floor: 0,
+          ceil: 100,
+          step: 10,
+          ticksArray: [0, 25, 50, 100],
+          showTicksValues: true
+        }
+      };
+      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(4);
+      expect(helper.element[0].querySelectorAll('.rz-tick-value')).to.have.length(4);
+      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('25');
+      var thirdTick = angular.element(helper.element[0].querySelectorAll('.rz-tick-value')[2]);
+      expect(thirdTick.text()).to.equal('50');
+      var lastTick = angular.element(helper.element[0].querySelectorAll('.rz-tick-value')[3]);
+      expect(lastTick.text()).to.equal('100');
+    });
+
     it('should create the correct number of legend items when getLegend is defined', function() {
       var sliderConf = {
         value: 50,