Add pointer colour to slider

README.md

@@ -173,6 +173,7 @@ The default options are:
     ticksValuesTooltip: null,
     vertical: false,
     selectionBarColor: null,
+    pointerColour: 'blue',
     keyboardSupport: true,
     scale: 1,
     enforceRange: false,
@@ -226,6 +227,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.
 
+**pointerColour** - _String_: To change the default pointer colour, set this to any valid background-color CSS style.
+
 **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.js

@@ -1,6 +1,6 @@
-/*! angularjs-slider - v2.4.0 - 
- (c) Rafal Zajac <[email protected]>, Valentin Hervieu <[email protected]>, Jussi Saarivirta <[email protected]>, Angelin Sirbu <[email protected]> - 
- https://github.com/angular-slider/angularjs-slider - 
+/*! angularjs-slider - v2.4.0 -
+ (c) Rafal Zajac <[email protected]>, Valentin Hervieu <[email protected]>, Jussi Saarivirta <[email protected]>, Angelin Sirbu <[email protected]> -
+ https://github.com/angular-slider/angularjs-slider -
  2015-12-30 */
 /*jslint unparam: true */
 /*global angular: false, console: false, define, module */
@@ -50,6 +50,7 @@
       selectionBarColor: null,
       keyboardSupport: true,
       scale: 1,
+	    pointerColour: 'blue',
       enforceRange: false,
       onlyBindHandles: false,
       onStart: null,
@@ -149,7 +150,6 @@
        * @type {jqLite}
        */
       this.sliderElem = sliderElem;
-
       /**
        * Slider type
        *
@@ -246,7 +246,6 @@
        * @type {boolean}
        */
       this.initHasRun = false;
-
       /**
        * Internal flag to prevent watchers to be called when the sliders value are modified internally.
        * @type {boolean}
@@ -427,6 +426,11 @@
           this.positionProperty = 'bottom';
           this.dimensionProperty = 'height';
         }
+        if (this.options.pointerColour) {
+          this.scope.pointerStyle = {
+            backgroundColor: this.options.pointerColour
+          };
+        }
       },
 
       /**
@@ -1644,7 +1648,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 ng-style=pointerStyle></span> <span class=rz-pointer ng-style=pointerStyle></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>"
   );
 
 }]);

src/rzslider.js

@@ -54,6 +54,7 @@
       selectionBarColor: null,
       keyboardSupport: true,
       scale: 1,
+	  pointerColour: 'blue',
       enforceRange: false,
       onlyBindHandles: false,
       onStart: null,
@@ -431,6 +432,11 @@
           this.positionProperty = 'bottom';
           this.dimensionProperty = 'height';
         }
+        if (this.options.pointerColour) {
+          this.scope.pointerStyle = {
+            backgroundColor: this.options.pointerColour
+          };
+        }
       },
 
       /**