feat: Add selectionBarGradient option to customize the selection bar (#473)

* feat: Add selectionBarGradient option to customize the selection bar

Add selectionBarGradient option which create a linear gradient for the selection bar. The option

accepts an object that contains `from` and `to` properties which are colors describing the gradient

* Add tests to the gradient feature

* Handle vertical + reverse case

Author: Masadow

README.md

@@ -242,7 +242,8 @@ The default options are:
     customTemplateScope: null,
     logScale: false,
     customValueToPosition: null,
-    customPositionToValue: null
+    customPositionToValue: null,
+    selectionBarGradient: null
 }
 ````
 
@@ -395,6 +396,7 @@ For custom scales:
 
 **customPositionToValue** - _Function(percent, minVal, maxVal): value_: Function that returns the value for a given position on the slider. The position is a percentage between 0 and 1.
 
+**selectionBarGradient** - _Object (default to null)_: Use to display the selection bar as a gradient. The given object must contain `from` and `to` properties which are colors.
 
 ## Change default options
 If you want the change the default options for all the sliders displayed in your application, you can set them using the `RzSliderOptions.options()` method:

demo/demo.js

@@ -94,6 +94,20 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $uibModal) {
     }
   };
 
+  //Slider with selection bar gradient
+  $scope.gradient_slider_bar = {
+    minValue: 0,
+    maxValue: 33,
+    options: {
+      ceil: 100,
+      showSelectionBar: true,
+      selectionBarGradient: {
+        from: 'white',
+        to: '#0db9f0'
+      }
+    }
+  };
+
   //Slider with selection bar color
   $scope.color_slider_bar = {
     value: 12,
@@ -412,7 +426,12 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $uibModal) {
     options: {
       floor: 0,
       ceil: 10,
-      vertical: true
+      vertical: true,
+      showSelectionBarEnd: true,
+      selectionBarGradient: {
+        from: 'white',
+        to: '#0db9f0'
+      }
     }
   };
   $scope.verticalSlider2 = {
@@ -421,7 +440,11 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $uibModal) {
     options: {
       floor: 0,
       ceil: 100,
-      vertical: true
+      vertical: true,
+      selectionBarGradient: {
+        from: 'white',
+        to: '#0db9f0'
+      }
     }
   };
   $scope.verticalSlider3 = {

demo/index.html

@@ -95,6 +95,15 @@ <h2>Slider with visible selection bar from a value</h2>
     ></rzslider>
   </article>
 
+  <article>
+    <h2>Slider with selection bar gradient</h2>
+    <rzslider
+            rz-slider-model="gradient_slider_bar.minValue"
+            rz-slider-high="gradient_slider_bar.maxValue"
+            rz-slider-options="gradient_slider_bar.options"
+    ></rzslider>
+  </article>
+
   <article>
     <h2>Slider with dynamic selection bar colors</h2>
     <rzslider

dist/rzslider.css

@@ -1,7 +1,7 @@
 /*! angularjs-slider - v5.8.9 - 
  (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-12-11 */
+ 2016-12-12 */
 /*jslint unparam: true */
 /*global angular: false, console: false, define, module */
 (function(root, factory) {
@@ -80,7 +80,8 @@
       customTemplateScope: null,
       logScale: false,
       customValueToPosition: null,
-      customPositionToValue: null
+      customPositionToValue: null,
+      selectionBarGradient: null
     };
     var globalOptions = {};
 
@@ -1268,6 +1269,20 @@
           this.scope.barStyle = {
             backgroundColor: color
           };
+        } else if (this.options.selectionBarGradient) {
+          var offset = this.options.showSelectionBarFromValue !== null ? this.valueToPosition(this.options.showSelectionBarFromValue) : 0,
+            reversed = offset - position > 0 ^ isSelectionBarFromRight,
+            direction = this.options.vertical ? (reversed ? 'bottom' : 'top') : (reversed ? 'left' : 'right');
+          this.scope.barStyle = {
+            backgroundImage: 'linear-gradient(to ' + direction + ', ' + this.options.selectionBarGradient.from + ' 0%,' + this.options.selectionBarGradient.to + ' 100%)'
+          };
+          if (this.options.vertical) {
+            this.scope.barStyle.backgroundPosition = 'center ' + (offset + dimension + position + (reversed ? -this.handleHalfDim : 0)) + 'px';
+            this.scope.barStyle.backgroundSize = '100% ' + (this.barDimension - this.handleHalfDim) + 'px';
+          } else {
+            this.scope.barStyle.backgroundPosition = (offset - position + (reversed ? this.handleHalfDim : 0)) + 'px center';
+            this.scope.barStyle.backgroundSize = (this.barDimension - this.handleHalfDim) + 'px 100%';
+          }
         }
       },
 

dist/rzslider.js

@@ -84,7 +84,8 @@
       customTemplateScope: null,
       logScale: false,
       customValueToPosition: null,
-      customPositionToValue: null
+      customPositionToValue: null,
+      selectionBarGradient: null
     };
     var globalOptions = {};
 
@@ -1272,6 +1273,20 @@
           this.scope.barStyle = {
             backgroundColor: color
           };
+        } else if (this.options.selectionBarGradient) {
+          var offset = this.options.showSelectionBarFromValue !== null ? this.valueToPosition(this.options.showSelectionBarFromValue) : 0,
+            reversed = offset - position > 0 ^ isSelectionBarFromRight,
+            direction = this.options.vertical ? (reversed ? 'bottom' : 'top') : (reversed ? 'left' : 'right');
+          this.scope.barStyle = {
+            backgroundImage: 'linear-gradient(to ' + direction + ', ' + this.options.selectionBarGradient.from + ' 0%,' + this.options.selectionBarGradient.to + ' 100%)'
+          };
+          if (this.options.vertical) {
+            this.scope.barStyle.backgroundPosition = 'center ' + (offset + dimension + position + (reversed ? -this.handleHalfDim : 0)) + 'px';
+            this.scope.barStyle.backgroundSize = '100% ' + (this.barDimension - this.handleHalfDim) + 'px';
+          } else {
+            this.scope.barStyle.backgroundPosition = (offset - position + (reversed ? this.handleHalfDim : 0)) + 'px center';
+            this.scope.barStyle.backgroundSize = (this.barDimension - this.handleHalfDim) + 'px 100%';
+          }
         }
       },
 

dist/rzslider.min.css

@@ -413,6 +413,49 @@
         expect(helper.slider.selBar.css('left')).to.equal(expectedPosition + 'px');
       });
 
+      it('should set the correct background position for selection bar for range slider when selectionBarGradient is used with a value {from: "white"; to:"blue"}', function() {
+        var sliderConf = {
+          min: 5,
+          max: 10,
+          options: {
+            floor: 0,
+            ceil: 20,
+            selectionBarGradient: {
+              from: 'white',
+              to: 'blue'
+            }
+          }
+        };
+
+        helper.createRangeSlider(sliderConf);
+
+        var expectedPosition = -(Math.round(helper.slider.valueToPosition(5)) + helper.slider.handleHalfDim) + 'px center',
+          actualPosition = helper.slider.scope.barStyle.backgroundPosition;
+        expect(actualPosition).to.equal(expectedPosition);
+      });
+
+      it('should set the correct gradient for selection bar for slider when selectionBarGradient is used with a value {from: "white"; to:"blue"} and vertical is used with a value true', function() {
+        var sliderConf = {
+          value: 5,
+          options: {
+            floor: 0,
+            ceil: 20,
+            vertical: true,
+            showSelectionBar: true,
+            selectionBarGradient: {
+              from: 'white',
+              to: 'blue'
+            }
+          }
+        };
+
+        helper.createSlider(sliderConf);
+
+        var expectedGradient = 'linear-gradient(to top, white 0%,blue 100%)',
+          actualGradient = helper.slider.scope.barStyle.backgroundImage;
+        expect(actualGradient).to.equal(expectedGradient);
+      });
+
       it('should set alwaysHide on floor/ceil when hideLimitLabels is set to true', function() {
         var sliderConf = {
           value: 10,