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

feat(ticks): Refactor ticks to improve flexibility

Author: ValentinH

.gitignore

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

CHANGELOG.md

@@ -1,10 +1,16 @@
+# 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 @@ <h2>Slider with dynamic pointer color</h2>
     ></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 @@ <h2>Slider with custom display function using html formatting</h2>
     ></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 @@ <h2>Slider with ticks</h2>
     ></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 @@ <h2>Slider with ticks values and legend</h2>
     ></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 @@ <h2>Sliders inside tabs</h2>
     </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

@@ -1,7 +1,7 @@
 /*! angularjs-slider - v5.5.1 - 
  (c) Rafal Zajac <[email protected]>, Valentin Hervieu <[email protected]>, Jussi Saarivirta <[email protected]>, Angelin Sirbu <[email protected]> - 
  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;
 }