feat(pointerColor): Adding feature for dynamic pointer color based on the value

Changing the color of the pointer of a slider based on the value. Just pass a function to the
'pointerColor' option which returns a valid CSS color definition (either hex or named) and let the
pointer shine in the brightest colors

Author: BlackIPS

README.md

@@ -182,6 +182,7 @@ The default options are:
     ticksValuesTooltip: null,
     vertical: false,
     selectionBarColor: null,
+    getPointerColor: null,
     keyboardSupport: true,
     scale: 1,
     enforceStep: true,
@@ -249,6 +250,8 @@ $scope.slider = {
 
 **getSelectionBarColor** - _Function(value) or Function(minVal, maxVal) (defaults to null)_: Function that returns the current color of the selection bar. 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.
 
+**getPointerColor** - _Function(value, pointerType) (defaults to null)_: Function that returns the current color of a pointer. To handle range slider pointer independently, you should evaluate pointerType within the given function where "min" stands for `rzScopeModel` and "max" for `rzScopeHigh` values. Indeed, when the function is called, there is no certainty that the model has already been updated.
+
 **hideLimitLabels** - _Boolean (defaults to false)_: Set to true to hide min / max labels
 
 **readOnly** - _Boolean (defaults to false)_: Set to true to make the slider read-only.

dist/rzslider.css

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

dist/rzslider.js

@@ -1,7 +1,7 @@
 /*! angularjs-slider - v2.7.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-02-06 */
+ 2016-02-07 */
 /*jslint unparam: true */
 /*global angular: false, console: false, define, module */
 (function(root, factory) {
@@ -50,6 +50,7 @@
       ticksValuesTooltip: null,
       vertical: false,
       selectionBarColor: null,
+      getPointerColor: null,
       keyboardSupport: true,
       scale: 1,
       enforceStep: true,
@@ -889,6 +890,13 @@
         );
         this.setPosition(this.minLab, pos);
 
+        if (this.options.getPointerColor) {
+          var pointercolor = this.getPointerColor('min');
+          this.scope.minPointerStyle = {
+            backgroundColor: pointercolor
+          };
+        }
+
         this.shFloorCeil();
       },
 
@@ -904,6 +912,13 @@
         var pos = Math.min(newOffset - this.maxLab.rzsd / 2 + this.handleHalfDim, this.barDimension - this.maxLab.rzsd);
         this.setPosition(this.maxLab, pos);
 
+        if (this.options.getPointerColor) {
+          var pointercolor = this.getPointerColor('max');
+          this.scope.maxPointerStyle = {
+            backgroundColor: pointercolor
+          };
+        }
+
         this.shFloorCeil();
       },
 
@@ -1001,6 +1016,17 @@
         return this.options.getSelectionBarColor(this.scope.rzSliderModel);
       },
 
+      /**
+       * Wrapper around the getPointerColor of the user to pass to
+       * correct parameters
+       */
+      getPointerColor: function(pointerType) {
+        if ( pointerType === 'max' ) {
+          return this.options.getPointerColor(this.scope.rzSliderHigh, pointerType);
+        }
+        return this.options.getPointerColor(this.scope.rzSliderModel, pointerType);
+      },
+
       /**
        * Update combined label position and value
        *
@@ -1697,7 +1723,7 @@
   'use strict';
 
   $templateCache.put('rzSliderTpl.html',
-    "<span class=rz-bar-wrapper><span class=rz-bar></span></span> <span class=rz-bar-wrapper><span class=\"rz-bar rz-selection\" ng-style=barStyle></span></span> <span class=rz-pointer></span> <span class=rz-pointer></span> <span class=\"rz-bubble rz-limit\"></span> <span class=\"rz-bubble rz-limit\"></span> <span class=rz-bubble></span> <span class=rz-bubble></span> <span class=rz-bubble></span><ul ng-show=showTicks class=rz-ticks><li ng-repeat=\"t in ticks track by $index\" class=tick ng-class=\"{selected: t.selected}\" ng-style=t.style ng-attr-uib-tooltip=\"{{ t.tooltip }}\" ng-attr-tooltip-placement={{t.tooltipPlacement}} ng-attr-tooltip-append-to-body=\"{{ t.tooltip ? true : undefined}}\"><span ng-if=\"t.value != null\" class=tick-value ng-attr-uib-tooltip=\"{{ t.valueTooltip }}\" ng-attr-tooltip-placement={{t.valueTooltipPlacement}}>{{ t.value }}</span></li></ul>"
+    "<span class=rz-bar-wrapper><span class=rz-bar></span></span> <span class=rz-bar-wrapper><span class=\"rz-bar rz-selection\" ng-style=barStyle></span></span> <span class=\"rz-pointer rz-pointer-min\" ng-style=minPointerStyle></span> <span class=\"rz-pointer rz-pointer-max\" ng-style=maxPointerStyle></span> <span class=\"rz-bubble rz-limit\"></span> <span class=\"rz-bubble rz-limit\"></span> <span class=rz-bubble></span> <span class=rz-bubble></span> <span class=rz-bubble></span><ul ng-show=showTicks class=rz-ticks><li ng-repeat=\"t in ticks track by $index\" class=tick ng-class=\"{selected: t.selected}\" ng-style=t.style ng-attr-uib-tooltip=\"{{ t.tooltip }}\" ng-attr-tooltip-placement={{t.tooltipPlacement}} ng-attr-tooltip-append-to-body=\"{{ t.tooltip ? true : undefined}}\"><span ng-if=\"t.value != null\" class=tick-value ng-attr-uib-tooltip=\"{{ t.valueTooltip }}\" ng-attr-tooltip-placement={{t.valueTooltipPlacement}}>{{ t.value }}</span></li></ul>"
   );
 
 }]);

dist/rzslider.min.css

@@ -2,8 +2,8 @@
 <span class="rz-bar-wrapper">
   <span class="rz-bar rz-selection" ng-style="barStyle"></span>
 </span> <!-- // 1 Highlight between two handles -->
-<span class="rz-pointer"></span> <!-- // 2 Left slider handle -->
-<span class="rz-pointer"></span> <!-- // 3 Right slider handle -->
+<span class="rz-pointer rz-pointer-min" ng-style=minPointerStyle></span> <!-- // 2 Left slider handle -->
+<span class="rz-pointer rz-pointer-max" ng-style=maxPointerStyle></span> <!-- // 3 Right slider handle -->
 <span class="rz-bubble rz-limit"></span> <!-- // 4 Floor label -->
 <span class="rz-bubble rz-limit"></span> <!-- // 5 Ceiling label -->
 <span class="rz-bubble"></span> <!-- // 6 Label above left slider handle -->

dist/rzslider.min.js

@@ -54,6 +54,7 @@
       ticksValuesTooltip: null,
       vertical: false,
       selectionBarColor: null,
+      getPointerColor: null,
       keyboardSupport: true,
       scale: 1,
       enforceStep: true,
@@ -893,6 +894,13 @@
         );
         this.setPosition(this.minLab, pos);
 
+        if (this.options.getPointerColor) {
+          var pointercolor = this.getPointerColor('min');
+          this.scope.minPointerStyle = {
+            backgroundColor: pointercolor
+          };
+        }
+
         this.shFloorCeil();
       },
 
@@ -908,6 +916,13 @@
         var pos = Math.min(newOffset - this.maxLab.rzsd / 2 + this.handleHalfDim, this.barDimension - this.maxLab.rzsd);
         this.setPosition(this.maxLab, pos);
 
+        if (this.options.getPointerColor) {
+          var pointercolor = this.getPointerColor('max');
+          this.scope.maxPointerStyle = {
+            backgroundColor: pointercolor
+          };
+        }
+
         this.shFloorCeil();
       },
 
@@ -1005,6 +1020,17 @@
         return this.options.getSelectionBarColor(this.scope.rzSliderModel);
       },
 
+      /**
+       * Wrapper around the getPointerColor of the user to pass to
+       * correct parameters
+       */
+      getPointerColor: function(pointerType) {
+        if ( pointerType === 'max' ) {
+          return this.options.getPointerColor(this.scope.rzSliderHigh, pointerType);
+        }
+        return this.options.getPointerColor(this.scope.rzSliderModel, pointerType);
+      },
+
       /**
        * Update combined label position and value
        *

src/rzSliderTpl.html

@@ -587,6 +587,118 @@ describe('rzslider - ', function() {
         $timeout.flush();
         sliderConf.options.onEnd.calledWith('test').should.be.true;
       });
+
+      it('should set the correct background-color on pointer for single slider', function() {
+        var sliderConf = {
+          value: 10,
+          options: {
+            floor: 0,
+            ceil: 10,
+            showSelectionBar: true,
+            getPointerColor: function(v) {
+              if (v < 5) return 'red';
+              return 'green';
+            }
+          }
+        };
+        createSlider(sliderConf);
+        var minHChild = angular.element(slider.minH[0]);
+        expect(minHChild.css('background-color')).to.equal('green');
+
+        scope.slider.value = 2;
+        scope.$digest();
+        expect(minHChild.css('background-color')).to.equal('red');
+      });
+
+      it('should set the correct background-color on pointer for range slider (simple rule)', function() {
+        var sliderConf = {
+          min: 2,
+          max: 8,
+          options: {
+            floor: 0,
+            ceil: 10,
+            getPointerColor: function(v) {
+              if (v < 5) return 'red';
+              return 'green';
+            }
+          }
+        };
+        createRangeSlider(sliderConf);
+        var minHChild = angular.element(slider.minH[0]),
+            maxHChild = angular.element(slider.maxH[0]);
+        expect(minHChild.css('background-color')).to.equal('red');
+        expect(maxHChild.css('background-color')).to.equal('green');
+
+        scope.slider.min = 6;
+        scope.slider.max = 7;
+        scope.$digest();
+        expect(minHChild.css('background-color')).to.equal('green');
+        expect(maxHChild.css('background-color')).to.equal('green');
+      });
+
+      it('should set the correct background-color on pointer for range slider (min/high independent rule 1)', function() {
+        var sliderConf = {
+          min: 2,
+          max: 8,
+          options: {
+            floor: 0,
+            ceil: 10,
+            getPointerColor: function(v, type) {
+              if ( type == 'min' ) {
+                if (v < 5) return 'red';
+                return 'green';
+              }
+
+              if ( type == 'max' ) {
+                if (v < 5) return 'blue';
+                return 'orange';
+              }
+            }
+          }
+        };
+        createRangeSlider(sliderConf);
+        var minHChild = angular.element(slider.minH[0]),
+            maxHChild = angular.element(slider.maxH[0]);
+        expect(minHChild.css('background-color')).to.equal('red');
+        expect(maxHChild.css('background-color')).to.equal('orange');
+
+        scope.slider.min = 6;
+        scope.$digest();
+        expect(minHChild.css('background-color')).to.equal('green');
+      });
+
+      it('should set the correct background-color on pointer for range slider (min/high independent rule 2)', function() {
+        var sliderConf = {
+          min: 2,
+          max: 8,
+          options: {
+            floor: 0,
+            ceil: 10,
+            getPointerColor: function(v, type) {
+              if ( type == 'min' ) {
+                if (v < 5) return 'red';
+                return 'green';
+              }
+
+              if ( type == 'max' ) {
+                if (v < 5) return 'blue';
+                return 'orange';
+              }
+            }
+          }
+        };
+        createRangeSlider(sliderConf);
+        var minHChild = angular.element(slider.minH[0]),
+            maxHChild = angular.element(slider.maxH[0]);
+        expect(minHChild.css('background-color')).to.equal('red');
+        expect(maxHChild.css('background-color')).to.equal('orange');
+
+        scope.slider.max = 3;
+        scope.$digest();
+        expect(minHChild.css('background-color')).to.equal('red');
+        expect(maxHChild.css('background-color')).to.equal('blue');
+
+      });
     });
   });