Support getSelectionBarColor for ticks.

demo/demo.js

@@ -25,7 +25,6 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
     }
   };
 
-
   //Slider with selection bar
   $scope.color_slider_bar = {
     value: 12,

dist/rzslider.js

@@ -377,7 +377,6 @@
         this.range = this.scope.rzSliderModel !== undefined && this.scope.rzSliderHigh !== undefined;
         this.options.draggableRange = this.range && this.options.draggableRange;
         this.options.showTicks = this.options.showTicks || this.options.showTicksValues;
-        this.scope.showTicks = this.options.showTicks; //scope is used in the template
 
         if (this.options.stepsArray) {
           this.options.floor = 0;
@@ -491,6 +490,9 @@
         this.alwaysHide(this.cmbLab, this.options.showTicksValues || !this.range);
         this.alwaysHide(this.selBar, !this.range && !this.options.showSelectionBar);
 
+        if (!this.options.showTicks)
+          this.ticks.html('');
+
         if (this.options.draggableRange)
           this.selBar.addClass('rz-draggable');
         else
@@ -657,25 +659,34 @@
        */
       updateTicksScale: function() {
         if (!this.options.showTicks) return;
-        if (!this.step) return; //if step is 0, we'll get a zero division
+        if (!this.step) return; //if step is 0, the following loop will be endless.
 
         var positions = '',
           ticksCount = Math.round((this.maxValue - this.minValue) / this.step) + 1;
-        this.scope.ticks = [];
         for (var i = 0; i < ticksCount; i++) {
-          var value = this.roundStep(this.minValue + i * this.step);
-          var tick = {
-            selected: this.isTickSelected(value)
-          };
+          var value = this.roundStep(this.minValue + i * this.step),
+              selected = this.isTickSelected(value),
+              selectedClass = selected ? 'selected' : '',
+              customStyle = '';
+          if (selected && this.options.getSelectionBarColor) {
+            var color = this.options.getSelectionBarColor();
+            customStyle = 'style="background-color: ' + color + '"';
+          }
+          positions += '<li class="tick ' + selectedClass + '" ' + customStyle + '>';
           if (this.options.showTicksValues) {
-            tick.value = this.getDisplayValue(value);
+            var tooltip = '';
             if (this.options.ticksValuesTooltip) {
-              tick.tooltip = this.options.ticksValuesTooltip(value);
-              tick.tooltipPlacement = this.options.vertical ? 'right' : 'top';
+              tooltip = 'uib-tooltip="' + this.options.ticksValuesTooltip(value) + '"';
+              if (this.options.vertical)
+                tooltip += ' tooltip-placement="right"'
             }
+            positions += '<span ' + tooltip + ' class="tick-value">' + this.getDisplayValue(value) + '</span>';
           }
-          this.scope.ticks.push(tick);
+          positions += '</li>';
         }
+        this.ticks.html(positions);
+        if (this.options.ticksValuesTooltip)
+          $compile(this.ticks.contents())(this.scope);
       },
 
       isTickSelected: function(value) {
@@ -865,7 +876,7 @@
       updateSelectionBar: function() {
         this.setDimension(this.selBar, Math.abs(this.maxH.rzsp - this.minH.rzsp) + this.handleHalfDim);
         this.setPosition(this.selBar, this.range ? this.minH.rzsp + this.handleHalfDim : 0);
-        if(this.options.getSelectionBarColor) {
+        if (this.options.getSelectionBarColor) {
           var color = this.options.getSelectionBarColor();
           this.selBarChild.css({backgroundColor: color});
         }
@@ -1434,7 +1445,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\"></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\" class=tick ng-class=\"{selected: t.selected}\"><span ng-if=\"t.value != null && t.tooltip == null\" class=tick-value>{{ t.value }}</span> <span ng-if=\"t.value != null && t.tooltip != null\" class=tick-value uib-tooltip=\"{{ t.tooltip }}\" tooltip-placement={{t.tooltipPlacement}}>{{ 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\"></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 class=rz-ticks></ul>"
   );
 
 }]);

src/rzSliderTpl.html

@@ -7,10 +7,4 @@
 <span class="rz-bubble"></span> <!-- // 6 Label above left slider handle -->
 <span class="rz-bubble"></span> <!-- // 7 Label above right slider handle -->
 <span class="rz-bubble"></span> <!-- // 8 Range label when the slider handles are close ex. 15 - 17 -->
-<ul ng-show="showTicks" class="rz-ticks"> <!-- // 9 The ticks -->
-  <li ng-repeat="t in ticks" class="tick" ng-class="{selected: t.selected}">
-    <span ng-if="t.value != null && t.tooltip == null" class="tick-value">{{ t.value }}</span>
-    <span ng-if="t.value != null && t.tooltip != null" class="tick-value"
-      uib-tooltip="{{ t.tooltip }}" tooltip-placement="{{t.tooltipPlacement}}">{{ t.value }}</span>
-  </li>
-</ul>
+<ul class="rz-ticks"></ul> <!-- // 9 The ticks -->

src/rzslider.js

@@ -377,7 +377,6 @@
         this.range = this.scope.rzSliderModel !== undefined && this.scope.rzSliderHigh !== undefined;
         this.options.draggableRange = this.range && this.options.draggableRange;
         this.options.showTicks = this.options.showTicks || this.options.showTicksValues;
-        this.scope.showTicks = this.options.showTicks; //scope is used in the template
 
         if (this.options.stepsArray) {
           this.options.floor = 0;
@@ -491,6 +490,9 @@
         this.alwaysHide(this.cmbLab, this.options.showTicksValues || !this.range);
         this.alwaysHide(this.selBar, !this.range && !this.options.showSelectionBar);
 
+        if (!this.options.showTicks)
+          this.ticks.html('');
+
         if (this.options.draggableRange)
           this.selBar.addClass('rz-draggable');
         else
@@ -657,25 +659,34 @@
        */
       updateTicksScale: function() {
         if (!this.options.showTicks) return;
-        if (!this.step) return; //if step is 0, we'll get a zero division
+        if (!this.step) return; //if step is 0, the following loop will be endless.
 
         var positions = '',
           ticksCount = Math.round((this.maxValue - this.minValue) / this.step) + 1;
-        this.scope.ticks = [];
         for (var i = 0; i < ticksCount; i++) {
-          var value = this.roundStep(this.minValue + i * this.step);
-          var tick = {
-            selected: this.isTickSelected(value)
-          };
+          var value = this.roundStep(this.minValue + i * this.step),
+              selected = this.isTickSelected(value),
+              selectedClass = selected ? 'selected' : '',
+              customStyle = '';
+          if (selected && this.options.getSelectionBarColor) {
+            var color = this.options.getSelectionBarColor();
+            customStyle = 'style="background-color: ' + color + '"';
+          }
+          positions += '<li class="tick ' + selectedClass + '" ' + customStyle + '>';
           if (this.options.showTicksValues) {
-            tick.value = this.getDisplayValue(value);
+            var tooltip = '';
             if (this.options.ticksValuesTooltip) {
-              tick.tooltip = this.options.ticksValuesTooltip(value);
-              tick.tooltipPlacement = this.options.vertical ? 'right' : 'top';
+              tooltip = 'uib-tooltip="' + this.options.ticksValuesTooltip(value) + '"';
+              if (this.options.vertical)
+                tooltip += ' tooltip-placement="right"'
             }
+            positions += '<span ' + tooltip + ' class="tick-value">' + this.getDisplayValue(value) + '</span>';
           }
-          this.scope.ticks.push(tick);
+          positions += '</li>';
         }
+        this.ticks.html(positions);
+        if (this.options.ticksValuesTooltip)
+          $compile(this.ticks.contents())(this.scope);
       },
 
       isTickSelected: function(value) {
@@ -865,7 +876,7 @@
       updateSelectionBar: function() {
         this.setDimension(this.selBar, Math.abs(this.maxH.rzsp - this.minH.rzsp) + this.handleHalfDim);
         this.setPosition(this.selBar, this.range ? this.minH.rzsp + this.handleHalfDim : 0);
-        if(this.options.getSelectionBarColor) {
+        if (this.options.getSelectionBarColor) {
           var color = this.options.getSelectionBarColor();
           this.selBarChild.css({backgroundColor: color});
         }