feat(selectionBar): Add a showSelectionBarFromValue

Author: Valentin Hervieu

demo/demo.js

@@ -58,6 +58,17 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
     }
   };
 
+  //Slider with selection bar from value
+  $scope.slider_visible_bar_from_value = {
+    value: 10,
+    options: {
+      floor: -100,
+      ceil: 100,
+      step: 10,
+      showSelectionBarFromValue: 0
+    }
+  };
+
   //Slider with selection bar
   $scope.color_slider_bar = {
     value: 12,

demo/index.html

@@ -70,6 +70,14 @@ <h2>Slider with visible selection bar at the end</h2>
     ></rzslider>
   </article>
 
+  <article>
+    <h2>Slider with visible selection bar from a value</h2>
+    <rzslider
+      rz-slider-model="slider_visible_bar_from_value.value"
+      rz-slider-options="slider_visible_bar_from_value.options"
+    ></rzslider>
+  </article>
+
   <article>
     <h2>Slider with dynamic selection bar colors</h2>
     <rzslider

dist/rzslider.js

@@ -1,7 +1,7 @@
 /*! angularjs-slider - v2.6.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 - 
- 2016-01-31 */
+ 2016-02-03 */
 /*jslint unparam: true */
 /*global angular: false, console: false, define, module */
 (function(root, factory) {
@@ -39,6 +39,7 @@
       draggableRangeOnly: false,
       showSelectionBar: false,
       showSelectionBarEnd: false,
+      showSelectionBarFromValue: null,
       hideLimitLabels: false,
       readOnly: false,
       disabled: false,
@@ -406,7 +407,8 @@
         this.options.showTicks = this.options.showTicks || this.options.showTicksValues;
         this.scope.showTicks = this.options.showTicks; //scope is used in the template
 
-        this.options.showSelectionBar = this.options.showSelectionBar || this.options.showSelectionBarEnd;
+        this.options.showSelectionBar = this.options.showSelectionBar || this.options.showSelectionBarEnd
+          || this.options.showSelectionBarFromValue !== null;
 
         if (this.options.stepsArray) {
           this.options.floor = 0;
@@ -762,8 +764,21 @@
       },
 
       isTickSelected: function(value) {
-        if (!this.range && this.options.showSelectionBar && value <= this.scope.rzSliderModel)
-          return true;
+        if (!this.range) {
+          if (this.options.showSelectionBarFromValue !== null) {
+            var center = this.options.showSelectionBarFromValue;
+            if (this.scope.rzSliderModel > center && value >= center && value <= this.scope.rzSliderModel)
+              return true;
+            else if (this.scope.rzSliderModel < center && value <= center && value >= this.scope.rzSliderModel)
+              return true;
+          }
+          else if (this.options.showSelectionBarEnd) {
+            if (value >= this.scope.rzSliderModel)
+              return true;
+          }
+          else if (this.options.showSelectionBar && value <= this.scope.rzSliderModel)
+            return true;
+        }
         if (this.range && value >= this.scope.rzSliderModel && value <= this.scope.rzSliderHigh)
           return true;
         return false;
@@ -932,13 +947,31 @@
       updateSelectionBar: function() {
         var position = 0,
           dimension = 0;
-        if (this.range || !this.options.showSelectionBarEnd) {
-          dimension = Math.abs(this.maxH.rzsp - this.minH.rzsp) + this.handleHalfDim
-          position = this.range ? this.minH.rzsp + this.handleHalfDim : 0;
-        } else {
-          dimension = Math.abs(this.maxPos - this.minH.rzsp) + this.handleHalfDim
+        if(this.range) {
+          dimension = Math.abs(this.maxH.rzsp - this.minH.rzsp) + this.handleHalfDim;
           position = this.minH.rzsp + this.handleHalfDim;
         }
+        else {
+          if (this.options.showSelectionBarFromValue !== null) {
+            var center = this.options.showSelectionBarFromValue,
+              centerPosition = this.valueToOffset(center);
+            if (this.scope.rzSliderModel > center) {
+              dimension = this.minH.rzsp - centerPosition;
+              position = centerPosition + this.handleHalfDim;
+            }
+            else {
+              dimension = centerPosition - this.minH.rzsp;
+              position = this.minH.rzsp + this.handleHalfDim;
+            }
+          }
+          else if (this.options.showSelectionBarEnd) {
+            dimension = Math.abs(this.maxPos - this.minH.rzsp) + this.handleHalfDim;
+            position = this.minH.rzsp + this.handleHalfDim;
+          } else {
+            dimension = Math.abs(this.maxH.rzsp - this.minH.rzsp) + this.handleHalfDim;
+            position = 0;
+          }
+        }
         this.setDimension(this.selBar, dimension);
         this.setPosition(this.selBar, position);
         if (this.options.getSelectionBarColor) {