Support ticks for range and always visible bars

Author: Valentin Hervieu

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "angularjs-slider",
-  "version": "0.1.33",
+  "version": "0.1.34",
   "homepage": "https://github.com/rzajac/angularjs-slider",
   "authors": [
     "Rafal Zajac <[email protected]>",

demo/index.html

@@ -103,6 +103,26 @@ <h2>Slider with ticks value example</h2>
                   rz-slider-show-ticks-value="true"></rzslider>
     </article>
 
+    <article>
+        <h2>Slider with ticks value and visible bar example</h2>
+        Value: {{ priceSlider6 | json }}
+        <rzslider rz-slider-model="priceSlider6"
+                  rz-slider-floor="0"
+                  rz-slider-ceil="10"
+                  rz-slider-always-show-bar="true"
+                  rz-slider-show-ticks-value="true"></rzslider>
+    </article>
+
+    <article>
+        <h2>Range Slider with ticks value example</h2>
+        Value: {{ priceSlider6 | json }}
+        <rzslider rz-slider-model="priceSlider7.min"
+                  rz-slider-high="priceSlider7.max"
+                  rz-slider-floor="0"
+                  rz-slider-ceil="10"
+                  rz-slider-show-ticks-value="true"></rzslider>
+    </article>
+
     <article>
         <h2>Draggable range example</h2>
         Value:
@@ -151,6 +171,11 @@ <h2>Toggle slider example</h2>
     $scope.priceSlider3 = 250;
     $scope.priceSlider4 = 5;
     $scope.priceSlider5 = 5;
+    $scope.priceSlider6 = 5;
+    $scope.priceSlider7 = {
+      min: 2,
+      max: 8
+    };
 
     $scope.translate = function(value) {
       return '$' + value;

dist/rzslider.css

@@ -128,10 +128,14 @@ rzslider .rz-ticks .tick {
   height: 10px;
   text-align: center;
   cursor: pointer;
-  background: #666666;
+  background: #d8e0f3;
   border-radius: 50%;
 }
 
+rzslider .rz-ticks .tick.selected {
+  background: #0db9f0;
+}
+
 rzslider .rz-ticks .tick .tick-value {
   position: absolute;
   top: -30px;

dist/rzslider.js

@@ -4,7 +4,7 @@
  * (c) Rafal Zajac <[email protected]>
  * http://github.com/rzajac/angularjs-slider
  *
- * Version: v0.1.33
+ * Version: v0.1.34
  *
  * Licensed under the MIT license
  */
@@ -296,8 +296,6 @@ function throttle(func, wait, options) {
         self.updateFloorLab();
         self.initHandles();
         if (!self.presentOnly) { self.bindEvents(); }
-        if(self.showTicks)
-          self.updateTicksScale();
       });
 
       // Recalculate slider view dimensions
@@ -316,6 +314,7 @@ function throttle(func, wait, options) {
         self.setMinAndMax();
         self.updateLowHandle(self.valueToOffset(self.scope.rzSliderModel));
         self.updateSelectionBar();
+        self.updateTicksScale();
 
         if(self.range)
         {
@@ -329,6 +328,7 @@ function throttle(func, wait, options) {
         self.setMinAndMax();
         self.updateHighHandle(self.valueToOffset(self.scope.rzSliderHigh));
         self.updateSelectionBar();
+        self.updateTicksScale();
         self.updateCmbLabel();
       }, 350, { leading: false });
 
@@ -438,6 +438,7 @@ function throttle(func, wait, options) {
       }
 
       this.updateSelectionBar();
+      this.updateTicksScale();
     },
 
     /**
@@ -605,8 +606,6 @@ function throttle(func, wait, options) {
 
       this.getWidth(this.sliderElem);
       this.sliderElem.rzsl = this.sliderElem[0].getBoundingClientRect().left;
-      if(this.showTicks)
-        this.updateTicksScale();
 
       if(this.initHasRun)
       {
@@ -621,16 +620,27 @@ function throttle(func, wait, options) {
      * @returns {undefined}
      */
     updateTicksScale: function() {
-        if(!this.step) return; //if step is 0, the following loop will be endless.
-
-        var positions = '';
-        for (var i = this.minValue; i <= this.maxValue; i += this.step) {
-          positions += '<li class="tick">';
-          if(this.showTicksValue)
-            positions += '<span class="tick-value">'+ this.getDisplayValue(i) +'</span>';
-          positions += '</li>';
-        }
-        this.ticks.html(positions);
+      if(!this.showTicks) return;
+      if(!this.step) return; //if step is 0, the following loop will be endless.
+
+      var positions = '';
+      for (var i = this.minValue; i <= this.maxValue; i += this.step) {
+        var selectedClass = this.isTickSelected(i) ? 'selected': false;
+        positions += '<li class="tick '+ selectedClass +'">';
+        if(this.showTicksValue)
+          positions += '<span class="tick-value">'+ this.getDisplayValue(i) +'</span>';
+        positions += '</li>';
+      }
+      this.ticks.html(positions);
+    },
+
+    isTickSelected: function(value) {
+      var tickLeft = this.valueToOffset(value);
+      if(!this.range && this.alwaysShowBar && value <= this.scope.rzSliderModel)
+        return true;
+      if(this.range && value >= this.scope.rzSliderModel && value <= this.scope.rzSliderHigh)
+        return true;
+      return false;
     },
 
     /**
@@ -710,6 +720,7 @@ function throttle(func, wait, options) {
       {
         this.updateLowHandle(newOffset);
         this.updateSelectionBar();
+        this.updateTicksScale();
 
         if(this.range)
         {
@@ -722,6 +733,7 @@ function throttle(func, wait, options) {
       {
         this.updateHighHandle(newOffset);
         this.updateSelectionBar();
+        this.updateTicksScale();
 
         if(this.range)
         {
@@ -734,6 +746,7 @@ function throttle(func, wait, options) {
       this.updateLowHandle(newOffset);
       this.updateHighHandle(newOffset);
       this.updateSelectionBar();
+      this.updateTicksScale();
       this.updateCmbLabel();
     },