Merge pull request #214 from angular-slider/showSelectionBarEnd

feat(selectionBar): Add a showSelectionBarEnd option

README.md

@@ -162,6 +162,7 @@ The default options are:
     draggableRange: false,
     draggableRangeOnly: false,
     showSelectionBar: false,
+    showSelectionBarEnd: false,
     hideLimitLabels: false,
     readOnly: false,
     disabled: false,
@@ -219,7 +220,9 @@ $scope.slider = {
 
 **draggableRangeOnly** - _Boolean (defaults to false)_: Same as draggableRange but the slider range can't be changed.
 
-**showSelectionBar** - _Boolean (defaults to false)_: Set to true to always show the selection bar.
+**showSelectionBar** - _Boolean (defaults to false)_: Set to true to always show the selection bar before the slider handle.
+
+**showSelectionBarEnd** - _Boolean (defaults to false)_: Set to true to always show the selection bar after 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.
 

demo/demo.js

@@ -13,6 +13,14 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
       showSelectionBar: true
     }
   };
+  //Slider with selection bar end
+  $scope.slider_visible_bar_end = {
+    value: 10,
+    options: {
+      ceil: 100,
+      showSelectionBarEnd: true
+    }
+  };
 
   //Range slider config
   $scope.minRangeSlider = {

demo/index.html

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

dist/rzslider.js

 /*! angularjs-slider - v2.3.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 - 
- 2015-12-29 */
+ 2015-12-30 */
 /*jslint unparam: true */
 /*global angular: false, console: false, define, module */
 (function(root, factory) {
@@ -37,6 +37,7 @@
       draggableRange: false,
       draggableRangeOnly: false,
       showSelectionBar: false,
+      showSelectionBarEnd: false,
       hideLimitLabels: false,
       readOnly: false,
       disabled: false,
@@ -406,6 +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;
+
         if (this.options.stepsArray) {
           this.options.floor = 0;
           this.options.ceil = this.options.stepsArray.length - 1;
@@ -925,8 +928,17 @@
        * @returns {undefined}
        */
       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);
+        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
+          position = this.minH.rzsp + this.handleHalfDim;
+        }
+        this.setDimension(this.selBar, dimension);
+        this.setPosition(this.selBar, position);
         if (this.options.getSelectionBarColor) {
           var color = this.getSelectionBarColor();
           this.scope.barStyle = {

src/rzslider.js

@@ -41,6 +41,7 @@
       draggableRange: false,
       draggableRangeOnly: false,
       showSelectionBar: false,
+      showSelectionBarEnd: false,
       hideLimitLabels: false,
       readOnly: false,
       disabled: false,
@@ -410,6 +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;
+
         if (this.options.stepsArray) {
           this.options.floor = 0;
           this.options.ceil = this.options.stepsArray.length - 1;
@@ -929,8 +932,17 @@
        * @returns {undefined}
        */
       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);
+        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
+          position = this.minH.rzsp + this.handleHalfDim;
+        }
+        this.setDimension(this.selBar, dimension);
+        this.setPosition(this.selBar, position);
         if (this.options.getSelectionBarColor) {
           var color = this.getSelectionBarColor();
           this.scope.barStyle = {

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

@@ -402,6 +402,37 @@ describe('rzslider - ', function() {
         expect(slider.maxValue).to.equal(100);
       });
 
+      it('should set the correct dimension/position for selection bar for single slider with showSelectionBar=true', function() {
+        var sliderConf = {
+          value: 2,
+          options: {
+            floor: 0,
+            ceil: 10,
+            showSelectionBar: true
+          }
+        };
+        createSlider(sliderConf);
+        var expectedDimension = slider.valueToOffset(2) + slider.handleHalfDim;
+        expect(slider.selBar.css('width')).to.equal(expectedDimension + 'px');
+        expect(slider.selBar.css('left')).to.equal('0px');
+      });
+
+      it('should set the correct dimension/position for selection bar for single slider with showSelectionBarEnd=true', function() {
+        var sliderConf = {
+          value: 2,
+          options: {
+            floor: 0,
+            ceil: 10,
+            showSelectionBarEnd: true
+          }
+        };
+        createSlider(sliderConf);
+        var expectedDimension = slider.valueToOffset(8) + slider.handleHalfDim,
+          expectedPosition = slider.valueToOffset(2) + 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,
@@ -424,6 +455,22 @@ describe('rzslider - ', function() {
         expect(selBarChild.css('background-color')).to.equal('red');
       });
 
+      it('should set the correct dimension/position for selection bar for range slider', function() {
+        var sliderConf = {
+          min: 2,
+          max: 8,
+          options: {
+            floor: 0,
+            ceil: 10
+          }
+        };
+        createRangeSlider(sliderConf);
+        var expectedDimension = slider.valueToOffset(6) + slider.handleHalfDim,
+          expectedPosition = slider.valueToOffset(2) + 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 range slider', function() {
         var sliderConf = {
           min: 2,