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

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,19 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $uibModal) {
     }
   };
 
+  //Slider with selection bar gradient
+  $scope.gradient_slider_bar = {
+    minValue: 0,
+    maxValue: 33,
+    options: {
+      showSelectionBar: true,
+      selectionBarGradient: {
+        from: 'white',
+        to: '#0db9f0'
+      }
+    }
+  };
+
   //Slider with selection bar color
   $scope.color_slider_bar = {
     value: 12,
@@ -421,7 +434,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.7 - 
  (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-11-09 */
+ 2016-12-07 */
 .rzslider {
   position: relative;
   display: inline-block;

dist/rzslider.js

@@ -1,7 +1,7 @@
 /*! angularjs-slider - v5.8.7 - 
  (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-11-09 */
+ 2016-12-07 */
 /*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 ? '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

@@ -1,7 +1,7 @@
 /*! angularjs-slider - v5.8.7 - 
  (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-11-09 */
+ 2016-12-07 */
 .rzslider {
   position: relative;
   display: inline-block;

dist/rzslider.min.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 ? '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%';
+          }
         }
       },