Added test for new tick colors (#372)

* feat(directive): Add function to customize color of ticks

Pass a custom function to the slider options to allow for dynamic tick color determination

Author: amit777

README.md

@@ -223,6 +223,7 @@ The default options are:
     ticksValuesTooltip: null,
     vertical: false,
     getSelectionBarColor: null,
+    getTickColor: null,
     getPointerColor: null,
     keyboardSupport: true,
     scale: 1,
@@ -318,6 +319,8 @@ Just pass an array with each slider value and that's it; the floor, ceil and ste
 
 **getSelectionBarColor** - _Function(value) or Function(minVal, maxVal) (defaults to null)_: Function that returns the current color of the selection bar. *If your color won't changed, don't use this option but set it through CSS.* If the returned color depends on a model value (either `rzScopeModel`or `'rzSliderHigh`), you should use the argument passed to the function. Indeed, when the function is called, there is no certainty that the model has already been updated.
 
+**getTickColor** - _Function(value) (defaults to null)_: Function that returns the color of a tick. showTicks must be enabled.
+
 **getPointerColor** - _Function(value, pointerType) (defaults to null)_: Function that returns the current color of a pointer. *If your color won't changed, don't use this option but set it through CSS.* If the returned color depends on a model value (either `rzScopeModel`or `'rzSliderHigh`), you should use the argument passed to the function. Indeed, when the function is called, there is no certainty that the model has already been updated. To handle range slider pointers independently, you should evaluate pointerType within the given function where "min" stands for `rzScopeModel` and "max" for `rzScopeHigh` values.
 
 **hidePointerLabels** - _Boolean (defaults to false)_: Set to true to hide pointer labels

demo/demo.js

@@ -333,6 +333,24 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
     }
   };
 
+  //Slider with custom tick formating
+  $scope.slider_custom_tick_format = {
+    value: 30,
+    options: {
+      ceil: 1000,
+      floor: 0,
+      showSelectionBar: true,
+      showTicks: true,
+      getTickColor: function(value){
+        if(value > 100){
+          return 'red'; 
+        }
+        return 'blue';
+      }
+    }
+  };
+
+
   //Vertical sliders
   $scope.verticalSlider1 = {
     value: 0,

demo/index.html

@@ -252,6 +252,14 @@ <h2>Slider with draggable range only</h2>
     ></rzslider>
   </article>
 
+  <article>
+    <h2>Slider with custom tick formatting</h2>
+    <rzslider
+      rz-slider-model="slider_custom_tick_format.value"
+      rz-slider-options="slider_custom_tick_format.options"
+    ></rzslider>
+  </article>
+
   <article>
     <h2>Vertical sliders</h2>
     <div class="row vertical-sliders" style="margin: 20px;">

dist/rzslider.css

@@ -1,7 +1,7 @@
 /*! angularjs-slider - v5.3.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-07-11 */
+ 2016-07-12 */
 .rzslider {
   position: relative;
   display: inline-block;

dist/rzslider.js

@@ -1,7 +1,7 @@
 /*! angularjs-slider - v5.3.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-07-11 */
+ 2016-07-12 */
 /*jslint unparam: true */
 /*global angular: false, console: false, define, module */
 (function(root, factory) {
@@ -57,6 +57,7 @@
       ticksValuesTooltip: null,
       vertical: false,
       getSelectionBarColor: null,
+      getTickColor: null,
       getPointerColor: null,
       keyboardSupport: true,
       scale: 1,
@@ -932,6 +933,11 @@
               'background-color': this.getSelectionBarColor()
             };
           }
+          if(!tick.selected && this.options.getTickColor){
+            tick.style = {
+              'background-color': this.getTickColor(value)
+            }
+          }
           if (this.options.ticksTooltip) {
             tick.tooltip = this.options.ticksTooltip(value);
             tick.tooltipPlacement = this.options.vertical ? 'right' : 'top';
@@ -1214,6 +1220,14 @@
         return this.options.getPointerColor(this.scope.rzSliderModel, pointerType);
       },
 
+      /**
+       * Wrapper around the getTickColor of the user to pass to
+       * correct parameters
+       */
+      getTickColor: function(value) {
+        return this.options.getTickColor(value);
+      },
+
       /**
        * Update combined label position and value
        *

dist/rzslider.min.css

@@ -61,6 +61,7 @@
       ticksValuesTooltip: null,
       vertical: false,
       getSelectionBarColor: null,
+      getTickColor: null,
       getPointerColor: null,
       keyboardSupport: true,
       scale: 1,
@@ -936,6 +937,11 @@
               'background-color': this.getSelectionBarColor()
             };
           }
+          if(!tick.selected && this.options.getTickColor){
+            tick.style = {
+              'background-color': this.getTickColor(value)
+            }
+          }
           if (this.options.ticksTooltip) {
             tick.tooltip = this.options.ticksTooltip(value);
             tick.tooltipPlacement = this.options.vertical ? 'right' : 'top';
@@ -1218,6 +1224,14 @@
         return this.options.getPointerColor(this.scope.rzSliderModel, pointerType);
       },
 
+      /**
+       * Wrapper around the getTickColor of the user to pass to
+       * correct parameters
+       */
+      getTickColor: function(value) {
+        return this.options.getTickColor(value);
+      },
+
       /**
        * Update combined label position and value
        *

dist/rzslider.min.js

@@ -639,6 +639,27 @@
 
       });
 
+      it('should set the correct background-color on tick', function() {
+        var sliderConf = {
+          value: 3,
+          options: {
+            floor: 0,
+            ceil: 10,
+            showTicks: true,
+            getTickColor: function(v) {
+              if (v < 5) return 'red';
+              return 'green';
+            }
+          }
+        };
+        helper.createRangeSlider(sliderConf);
+        expect(helper.element[0].querySelectorAll('.rz-tick')).to.have.length(11);
+        var firstTick = angular.element(helper.element[0].querySelectorAll('.rz-tick')[0]);
+        var lastTick = angular.element(helper.element[0].querySelectorAll('.rz-tick')[10]);
+        expect(firstTick[0].style['background-color']).to.equal('red');
+        expect(lastTick[0].style['background-color']).to.equal('green');
+      });
+
       it('should set the correct position for labels for single slider with boundPointerLabels=false', function() {
         var sliderConf = {
           min: 100000000,