Handle vertical + reverse case

Author: Masadow

demo/demo.js

@@ -426,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 = {

dist/rzslider.js

@@ -1272,12 +1272,12 @@
         } 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');
+            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.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';

dist/rzslider.min.js

@@ -1276,12 +1276,12 @@
         } 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');
+            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.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';