Merge pull request #250 from angular-slider/showSelectionBarFromValue

feat(selectionBar): Add a showSelectionBarFromValue

CHANGELOG.md

+# 2.7.0 (not released)
+## Features
+- Add a `showSelectionBarFromValue` options (#250).
+
 # 2.6.0 (2016-01-31)
 ## Features
 - Add a `noSwitching` option to prevent the user from switching the min and max handles (#233).

README.md

@@ -171,6 +171,7 @@ The default options are:
     draggableRangeOnly: false,
     showSelectionBar: false,
     showSelectionBarEnd: false,
+    showSelectionBarFromValue: null,
     hideLimitLabels: false,
     readOnly: false,
     disabled: false,
@@ -235,6 +236,8 @@ $scope.slider = {
 
 **showSelectionBarEnd** - _Boolean (defaults to false)_: Set to true to always show the selection bar after the slider handle.
 
+**showSelectionBarFromValue** - _Number (defaults to null)_: Set a number to draw the selection bar between this value and the slider handle.
+
 **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.
 
 **hideLimitLabels** - _Boolean (defaults to false)_: Set to true to hide min / max labels

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 @@
     ></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

 /*! angularjs-slider - v2.6.0 - 
  (c) Rafal Zajac <rzajac@gmail.com>, Valentin Hervieu <valentin@hervieu.me>, Jussi Saarivirta <jusasi@gmail.com>, Angelin Sirbu <angelin.sirbu@gmail.com> - 
  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) {

src/rzslider.js

@@ -43,6 +43,7 @@
       draggableRangeOnly: false,
       showSelectionBar: false,
       showSelectionBarEnd: false,
+      showSelectionBarFromValue: null,
       hideLimitLabels: false,
       readOnly: false,
       disabled: false,
@@ -410,7 +411,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;
@@ -766,8 +768,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;
@@ -936,13 +951,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) {

tests/spec/rz-slider-service-test.js

@@ -432,6 +432,38 @@ describe('rzslider - ', function() {
         expect(slider.selBar.css('left')).to.equal(expectedPosition + 'px');
       });
 
+      it('should set the correct dimension/position for selection bar for single slider with showSelectionBarFromValue is used with a value on the right', function() {
+        var sliderConf = {
+          value: 15,
+          options: {
+            floor: 0,
+            ceil: 20,
+            showSelectionBarFromValue: 10
+          }
+        };
+        createSlider(sliderConf);
+        var expectedDimension = slider.valueToOffset(5),
+          expectedPosition = slider.valueToOffset(10) + slider.handleHalfDim;
+        expect(slider.selBar.css('width')).to.equal(expectedDimension + 'px');
+        expect(slider.selBar.css('left')).to.equal(expectedPosition + 'px');
+      });
+
+      it('should set the correct dimension/position for selection bar for single slider with showSelectionBarFromValue is used with a value on the left', function() {
+        var sliderConf = {
+          value: 3,
+          options: {
+            floor: 0,
+            ceil: 20,
+            showSelectionBarFromValue: 10
+          }
+        };
+        createSlider(sliderConf);
+        var expectedDimension = slider.valueToOffset(7),
+          expectedPosition = slider.valueToOffset(3) + slider.handleHalfDim;
+        expect(slider.selBar.css('width')).to.equal(expectedDimension + 'px');
+        expect(slider.selBar.css('left')).to.equal(expectedPosition + 'px');
+      });
+
       it('should set the correct background-color on selection bar for single slider', function() {
         var sliderConf = {
           value: 10,
@@ -861,6 +893,85 @@ describe('rzslider - ', function() {
       expect(lastTick.hasClass('selected')).to.be.false;
     });
 
+    it('should set selected class to ticks above the model value if showSelectionBarEnd is true', function() {
+      var sliderConf = {
+        value: 50,
+        options: {
+          floor: 0,
+          ceil: 100,
+          step: 10,
+          showTicks: true,
+          showSelectionBarEnd: true
+        }
+      };
+      createSlider(sliderConf);
+      var firstTick = angular.element(element[0].querySelectorAll('.tick')[0]);
+      expect(firstTick.hasClass('selected')).to.be.false;
+      var fifthTick = angular.element(element[0].querySelectorAll('.tick')[4]);
+      expect(fifthTick.hasClass('selected')).to.be.false;
+      var sixthTick = angular.element(element[0].querySelectorAll('.tick')[5]);
+      expect(sixthTick.hasClass('selected')).to.be.true;
+      var seventhTick = angular.element(element[0].querySelectorAll('.tick')[6]);
+      expect(seventhTick.hasClass('selected')).to.be.true;
+      var lastTick = angular.element(element[0].querySelectorAll('.tick')[10]);
+      expect(lastTick.hasClass('selected')).to.be.true;
+    });
+
+    it('should set selected class to correct ticks if showSelectionBarFromValue is used and the model is on the right', function() {
+      var sliderConf = {
+        value: 50,
+        options: {
+          floor: 0,
+          ceil: 100,
+          step: 10,
+          showTicks: true,
+          showSelectionBarFromValue: 30
+        }
+      };
+      createSlider(sliderConf);
+      var firstTick = angular.element(element[0].querySelectorAll('.tick')[0]);
+      expect(firstTick.hasClass('selected')).to.be.false;
+      var thirdTick = angular.element(element[0].querySelectorAll('.tick')[2]);
+      expect(thirdTick.hasClass('selected')).to.be.false;
+      var fourthTick = angular.element(element[0].querySelectorAll('.tick')[3]);
+      expect(fourthTick.hasClass('selected')).to.be.true;
+      var fifthTick = angular.element(element[0].querySelectorAll('.tick')[4]);
+      expect(fifthTick.hasClass('selected')).to.be.true;
+      var sixthTick = angular.element(element[0].querySelectorAll('.tick')[5]);
+      expect(sixthTick.hasClass('selected')).to.be.true;
+      var seventhTick = angular.element(element[0].querySelectorAll('.tick')[6]);
+      expect(seventhTick.hasClass('selected')).to.be.false;
+      var lastTick = angular.element(element[0].querySelectorAll('.tick')[10]);
+      expect(lastTick.hasClass('selected')).to.be.false;
+    });
+    it('should set selected class to correct ticks if showSelectionBarFromValue is used and the model is on the left', function() {
+      var sliderConf = {
+        value: 50,
+        options: {
+          floor: 0,
+          ceil: 100,
+          step: 10,
+          showTicks: true,
+          showSelectionBarFromValue: 70
+        }
+      };
+      createSlider(sliderConf);
+      var firstTick = angular.element(element[0].querySelectorAll('.tick')[0]);
+      expect(firstTick.hasClass('selected')).to.be.false;
+      var fifthTick = angular.element(element[0].querySelectorAll('.tick')[4]);
+      expect(fifthTick.hasClass('selected')).to.be.false;
+      var sixthTick = angular.element(element[0].querySelectorAll('.tick')[5]);
+      expect(sixthTick.hasClass('selected')).to.be.true;
+      var seventhTick = angular.element(element[0].querySelectorAll('.tick')[6]);
+      expect(seventhTick.hasClass('selected')).to.be.true;
+      var eighthTick = angular.element(element[0].querySelectorAll('.tick')[7]);
+      expect(eighthTick.hasClass('selected')).to.be.true;
+      var ninthTick = angular.element(element[0].querySelectorAll('.tick')[8]);
+      expect(ninthTick.hasClass('selected')).to.be.false;
+      var lastTick = angular.element(element[0].querySelectorAll('.tick')[10]);
+      expect(lastTick.hasClass('selected')).to.be.false;
+    });
+
     it('should set selected class to ticks between min/max if showSelectionBar is true on range slider', function() {
       var sliderConf = {
         min: 40,