feat(RzSlider): Add RTL support

Added rightToLeft option which will reflow slider from right to left ( or switch vertical if

vertical: true)

.gitignore

@@ -3,3 +3,4 @@ node_modules/
 bower_components/
 temp/
 tests/coverage/
+dist/

CHANGELOG.md

+2.10.0 (2016-02-28)
+## Features
+- Added rightToLeft option for RTL support (#270)
+
 # 2.9.0 (2016-02-18)
 ## Features
 - Change `rzSliderOptions` to use expression binding (#266).

README.md

@@ -20,6 +20,7 @@ Slider directive implementation for AngularJS, without any dependencies: [http:/
 - Simple to use
 - Keyboard support
 - Compatibility with jQuery Lite, ie. with full jQuery ( Thanks Jusas! https://github.com/Jusas)
+- Supports right to left
 
 **Horizontal**
 
@@ -202,7 +203,8 @@ The default options are:
     onlyBindHandles: false,
     onStart: null,
     onChange: null,
-    onEnd: null
+    onEnd: null,
+    rightToLeft: false
 }
 ````
 
@@ -295,6 +297,8 @@ $scope.slider = {
 
 **onEnd** - _Function(sliderId, modelValue, highValue)_: Function to be called when a slider update is ended. If an id was set in the options, then it's passed to this callback.
 
+**rightToLeft** - _Boolean (defaults to false)_: Set to true to show graphs right to left. If **vertical** is true it reverses the left / right arrow functions
+
 **vertical** - _Boolean (defaults to false)_: Set to true to display the slider vertically. The slider will take the full height of its parent.
 _Changing this value at runtime is not currently supported._
 

demo/demo.js

@@ -112,6 +112,17 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
     }
   };
 
+  //Right to left slider with floor, ceil and step
+  $scope.slider_floor_ceil_rtl = {
+    value: 12,
+    options: {
+    floor: 10,
+    ceil: 100,
+    step: 5,
+    rightToLeft: true
+    }
+  }
+
   //Slider config with callbacks
   $scope.slider_callbacks = {
     value: 100,

demo/index.html

@@ -102,6 +102,14 @@
     ></rzslider>
   </article>
 
+  <article>
+    <h2>Right to left slider with custom floor/ceil/step</h2>
+    <rzslider
+      rz-slider-model="slider_floor_ceil_rtl.value"
+      rz-slider-options="slider_floor_ceil_rtl.options"
+    ></rzslider>
+  </article>
+
   <article>
     <h2>Slider with callbacks on start, change and end</h2>
     <p>Value linked on start: {{ otherData.start }}</p>
@@ -289,7 +297,8 @@
         <label>Show ticks <input type="checkbox" ng-model="slider_all_options.options.showTicks"></label><br/>
         <label>Show ticks values <input type="checkbox" ng-model="slider_all_options.options.showTicksValues"></label><br/>
         <label>Disabled <input type="checkbox" ng-model="slider_all_options.options.disabled"></label><br/>
-        <label>Read-Only <input type="checkbox" ng-model="slider_all_options.options.readOnly"></label>
+        <label>Read-Only <input type="checkbox" ng-model="slider_all_options.options.readOnly"></label><br />
+        <label>Right to Left <input type="checkbox" ng-model="slider_all_options.options.rightToLeft"></label>
       </div>
     </div>
     <rzslider

dist/rzslider.css

 /*! angularjs-slider - v2.9.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-02-24 */
+ 2016-02-28 */
 rzslider {
   position: relative;
   display: inline-block;

dist/rzslider.js

 /*! angularjs-slider - v2.9.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-02-24 */
+ 2016-02-28 */
 /*jslint unparam: true */
 /*global angular: false, console: false, define, module */
 (function(root, factory) {
@@ -59,7 +59,8 @@
       onlyBindHandles: false,
       onStart: null,
       onChange: null,
-      onEnd: null
+      onEnd: null,
+      rightToLeft: false
     };
     var globalOptions = {};
 
@@ -769,7 +770,11 @@
               tick.valueTooltipPlacement = this.options.vertical ? 'right' : 'top';
             }
           }
-          this.scope.ticks.push(tick);
+          if (!this.options.rightToLeft) {
+            this.scope.ticks.push(tick);
+          } else {
+            this.scope.ticks.unshift(tick);
+          }
         }
       },
 
@@ -801,7 +806,9 @@
        */
       updateCeilLab: function() {
         this.translateFn(this.maxValue, this.ceilLab, 'ceil');
-        this.setPosition(this.ceilLab, this.barDimension - this.ceilLab.rzsd);
+        var position = this.options.rightToLeft ? 0 : this.barDimension - this.ceilLab.rzsd;
+        this.setPosition(this.ceilLab, position);
+        //need to explicitly set to 0 for switching between rtl and ltr in demo
         this.getDimension(this.ceilLab);
       },
 
@@ -812,6 +819,8 @@
        */
       updateFloorLab: function() {
         this.translateFn(this.minValue, this.flrLab, 'floor');
+        var position = this.options.rightToLeft ? 0 : this.barDimension - this.flrLab.rzsd;
+        this.setPosition(this.flrLab, position);
         this.getDimension(this.flrLab);
       },
 
@@ -878,6 +887,26 @@
           this.updateCmbLabel();
       },
 
+      /**
+       * Helper function to work out the position for handle labels depending on RTL or not
+       *
+       * @param {string} labelName maxLab or minLab
+       * @param newOffset
+       *
+       * @returns {number}
+       */
+      getHandleLabelPos: function(labelName, newOffset) {
+        var labelRzsd = this[labelName].rzsd,
+          nearHandlePos = newOffset - labelRzsd / 2 + this.handleHalfDim,
+          endOfBarPos = this.barDimension - labelRzsd;
+
+        if (this.options.rightToLeft && labelName === 'minLab' || !this.options.rightToLeft && labelName === 'maxLab') {
+          return Math.min(nearHandlePos, endOfBarPos);
+        } else {
+          return Math.min(Math.max(nearHandlePos, 0), endOfBarPos);
+        }
+      },
+
       /**
        * Update low slider handle position and label
        *
@@ -887,14 +916,7 @@
       updateLowHandle: function(newOffset) {
         this.setPosition(this.minH, newOffset);
         this.translateFn(this.scope.rzSliderModel, this.minLab, 'model');
-        var pos = Math.min(
-          Math.max(
-            newOffset - this.minLab.rzsd / 2 + this.handleHalfDim,
-            0
-          ),
-          this.barDimension - this.minLab.rzsd
-        );
-        this.setPosition(this.minLab, pos);
+        this.setPosition(this.minLab, this.getHandleLabelPos('minLab', newOffset));
 
         if (this.options.getPointerColor) {
           var pointercolor = this.getPointerColor('min');
@@ -915,8 +937,7 @@
       updateHighHandle: function(newOffset) {
         this.setPosition(this.maxH, newOffset);
         this.translateFn(this.scope.rzSliderHigh, this.maxLab, 'high');
-        var pos = Math.min(newOffset - this.maxLab.rzsd / 2 + this.handleHalfDim, this.barDimension - this.maxLab.rzsd);
-        this.setPosition(this.maxLab, pos);
+        this.setPosition(this.maxLab, this.getHandleLabelPos("maxLab", newOffset));
 
         if (this.options.getPointerColor) {
           var pointercolor = this.getPointerColor('max');
@@ -935,9 +956,23 @@
        */
       shFloorCeil: function() {
         var flHidden = false,
-          clHidden = false;
-
-        if (this.minLab.rzsp <= this.flrLab.rzsp + this.flrLab.rzsd + 5) {
+          clHidden = false,
+          isRTL = this.options.rightToLeft,
+          flrLabPos = this.flrLab.rzsp,
+          flrLabDim = this.flrLab.rzsd,
+          minLabPos = this.minLab.rzsp,
+          minLabDim = this.minLab.rzsd,
+          maxLabPos = this.maxLab.rzsp,
+          maxLabDim = this.maxLab.rzsd,
+          ceilLabPos = this.ceilLab.rzsp,
+          halfHandle = this.handleHalfDim,
+          isMinLabAtFloor = isRTL ? minLabPos + minLabDim >= flrLabPos - flrLabDim - 5 : minLabPos <= flrLabPos + flrLabDim + 5,
+          isMinLabAtCeil = isRTL ? minLabPos - minLabDim <= ceilLabPos + halfHandle + 10 : minLabPos + minLabDim >= ceilLabPos - halfHandle - 10,
+          isMaxLabAtFloor = isRTL ? maxLabPos >= flrLabPos - flrLabDim - halfHandle : maxLabPos <= flrLabPos + flrLabDim + halfHandle,
+          isMaxLabAtCeil = isRTL ? maxLabPos - maxLabDim <= ceilLabPos + 10 : maxLabPos + maxLabDim >= ceilLabPos - 10;
+
+
+        if (isMinLabAtFloor) {
           flHidden = true;
           this.hideEl(this.flrLab);
         } else {
@@ -945,7 +980,7 @@
           this.showEl(this.flrLab);
         }
 
-        if (this.minLab.rzsp + this.minLab.rzsd >= this.ceilLab.rzsp - this.handleHalfDim - 10) {
+        if (isMinLabAtCeil) {
           clHidden = true;
           this.hideEl(this.ceilLab);
         } else {
@@ -954,14 +989,14 @@
         }
 
         if (this.range) {
-          if (this.maxLab.rzsp + this.maxLab.rzsd >= this.ceilLab.rzsp - 10) {
+          if (isMaxLabAtCeil) {
             this.hideEl(this.ceilLab);
           } else if (!clHidden) {
             this.showEl(this.ceilLab);
           }
 
           // Hide or show floor label
-          if (this.maxLab.rzsp <= this.flrLab.rzsp + this.flrLab.rzsd + this.handleHalfDim) {
+          if (isMaxLabAtFloor) {
             this.hideEl(this.flrLab);
           } else if (!flHidden) {
             this.showEl(this.flrLab);
@@ -976,16 +1011,20 @@
        */
       updateSelectionBar: function() {
         var position = 0,
-          dimension = 0;
+          dimension = 0,
+          isSelectionBarFromRight = this.options.rightToLeft ? !this.options.showSelectionBarEnd : this.options.showSelectionBarEnd,
+          positionForRange = this.options.rightToLeft ? this.maxH.rzsp + this.handleHalfDim : this.minH.rzsp + this.handleHalfDim;
+
         if (this.range) {
           dimension = Math.abs(this.maxH.rzsp - this.minH.rzsp);
-          position = this.minH.rzsp + this.handleHalfDim;
+          position = positionForRange;
         }
         else {
           if (this.options.showSelectionBarFromValue !== null) {
             var center = this.options.showSelectionBarFromValue,
-              centerPosition = this.valueToOffset(center);
-            if (this.scope.rzSliderModel > center) {
+              centerPosition = this.valueToOffset(center),
+              isModelGreaterThanCenter = this.options.rightToLeft ? this.scope.rzSliderModel <= center : this.scope.rzSliderModel > center;
+            if (isModelGreaterThanCenter) {
               dimension = this.minH.rzsp - centerPosition;
               position = centerPosition + this.handleHalfDim;
             }
@@ -994,7 +1033,7 @@
               position = this.minH.rzsp + this.handleHalfDim;
             }
           }
-          else if (this.options.showSelectionBarEnd) {
+          else if (isSelectionBarFromRight) {
             dimension = Math.abs(this.maxPos - this.minH.rzsp) + this.handleHalfDim;
             position = this.minH.rzsp + this.handleHalfDim;
           } else {
@@ -1027,7 +1066,7 @@
        * correct parameters
        */
       getPointerColor: function(pointerType) {
-        if ( pointerType === 'max' ) {
+        if (pointerType === 'max') {
           return this.options.getPointerColor(this.scope.rzSliderHigh, pointerType);
         }
         return this.options.getPointerColor(this.scope.rzSliderModel, pointerType);
@@ -1039,11 +1078,22 @@
        * @returns {undefined}
        */
       updateCmbLabel: function() {
+        var isLabelOverlap = null;
+        if (this.options.rightToLeft) {
+          isLabelOverlap = this.minLab.rzsp - this.minLab.rzsd - 10 <= this.maxLab.rzsp;
+        } else {
+          isLabelOverlap = this.minLab.rzsp + this.minLab.rzsd + 10 >= this.maxLab.rzsp;
+        }
 
-        if (this.minLab.rzsp + this.minLab.rzsd + 10 >= this.maxLab.rzsp) {
+        if (isLabelOverlap) {
           var lowTr = this.getDisplayValue(this.scope.rzSliderModel, 'model'),
             highTr = this.getDisplayValue(this.scope.rzSliderHigh, 'high'),
-            labelVal = lowTr === highTr ? lowTr : lowTr + ' - ' + highTr;
+            labelVal = '';
+          if (lowTr === highTr) {
+            labelVal = lowTr;
+          } else {
+            labelVal = this.options.rightToLeft ? highTr + ' - ' + lowTr : lowTr + ' - ' + highTr;
+          }
 
           this.translateFn(labelVal, this.cmbLab, 'cmb', false);
           var pos = Math.min(
@@ -1166,6 +1216,9 @@
        * @returns {number}
        */
       valueToOffset: function(val) {
+        if (this.options.rightToLeft) {
+          return (this.maxValue - this.sanitizeValue(val)) * this.maxPos / this.valueRange || 0;
+        }
         return (this.sanitizeValue(val) - this.minValue) * this.maxPos / this.valueRange || 0;
       },
 
@@ -1186,6 +1239,9 @@
        * @returns {number}
        */
       offsetToValue: function(offset) {
+        if (this.options.rightToLeft) {
+          return (1 - (offset / this.maxPos)) * this.valueRange + this.minValue;
+        }
         return (offset / this.maxPos) * this.valueRange + this.minValue;
       },
 
@@ -1265,8 +1321,12 @@
           return this.minH;
         else if (distanceMin > distanceMax)
           return this.maxH;
-        else //if event is at the same distance from min/max then if it's at left of minH, we return minH else maxH
+        else if (!this.options.rightToLeft)
+        //if event is at the same distance from min/max then if it's at left of minH, we return minH else maxH
           return offset < this.minH.rzsp ? this.minH : this.maxH;
+        else
+        //reverse in rtl
+          return offset > this.minH.rzsp ? this.minH : this.maxH;
       },
 
       /**
@@ -1407,12 +1467,14 @@
        */
       onMove: function(pointer, event) {
         var newOffset = this.getEventPosition(event),
-          newValue;
+          newValue,
+          ceilValue = this.options.rightToLeft ? this.minValue : this.maxValue,
+          flrValue = this.options.rightToLeft ? this.maxValue : this.minValue;
 
         if (newOffset <= 0) {
-          newValue = this.minValue;
+          newValue = flrValue;
         } else if (newOffset >= this.maxPos) {
-          newValue = this.maxValue;
+          newValue = ceilValue;
         } else {
           newValue = this.offsetToValue(newOffset);
           newValue = this.roundStep(newValue);
@@ -1455,6 +1517,43 @@
         pointer.removeClass('rz-active');
       },
 
+      /**
+       * Key actions helper function
+       *
+       * @param {number} currentValue value of the slider
+       *
+       * @returns {?Object} action value mappings
+       */
+      getKeyActions: function(currentValue) {
+        var increaseStep = currentValue + this.step,
+          decreaseStep = currentValue - this.step,
+          increasePage = currentValue + this.valueRange / 10,
+          decreasePage = currentValue - this.valueRange / 10;
+
+        //Left to right default actions
+        var actions = {
+          'UP': increaseStep,
+          'DOWN': decreaseStep,
+          'LEFT': decreaseStep,
+          'RIGHT': increaseStep,
+          'PAGEUP': increasePage,
+          'PAGEDOWN': decreasePage,
+          'HOME': this.minValue,
+          'END': this.maxValue
+        };
+        //right to left means swapping right and left arrows
+        if (this.options.rightToLeft) {
+          actions.LEFT = increaseStep;
+          actions.RIGHT = decreaseStep;
+          // right to left and vertical means we also swap up and down
+          if (this.options.vertical) {
+            actions.UP = decreaseStep;
+            actions.DOWN = increaseStep;
+          }
+        }
+        return actions;
+      },
+
       onKeyboardEvent: function(event) {
         var currentValue = this.scope[this.tracking],
           keyCode = event.keyCode || event.which,
@@ -1468,16 +1567,7 @@
             36: 'HOME',
             35: 'END'
           },
-          actions = {
-            UP: currentValue + this.step,
-            DOWN: currentValue - this.step,
-            LEFT: currentValue - this.step,
-            RIGHT: currentValue + this.step,
-            PAGEUP: currentValue + this.valueRange / 10,
-            PAGEDOWN: currentValue - this.valueRange / 10,
-            HOME: this.minValue,
-            END: this.maxValue
-          },
+          actions = this.getKeyActions(currentValue),
           key = keys[keyCode],
           action = actions[key];
         if (action == null || this.tracking === '') return;
@@ -1524,13 +1614,59 @@
           active: true,
           value: this.offsetToValue(offset),
           difference: this.scope.rzSliderHigh - this.scope.rzSliderModel,
-          lowLimit: offset - this.minH.rzsp,
-          highLimit: this.maxH.rzsp - offset
+          lowLimit: this.options.rightToLeft ? this.minH.rzsp - offset : offset - this.minH.rzsp,
+          highLimit: this.options.rightToLeft ? offset - this.maxH.rzsp : this.maxH.rzsp - offset
         };
 
         this.onStart(pointer, ref, event);
       },
 
+      /**
+       * getValue helper function
+       *
+       * gets max or min value depending on whether the newOffset is outOfBounds above or below the bar and rightToLeft
+       *
+       * @param {string} type 'max' || 'min' The value we are calculating
+       * @param {number} newOffset  The new offset
+       * @param {boolean} outOfBounds Is the new offset above or below the max/min?
+       * @param {boolean} isAbove Is the new offset above the bar if out of bounds?
+       *
+       * @returns {number}
+       */
+      getValue: function(type, newOffset, outOfBounds, isAbove) {
+        var isRTL = this.options.rightToLeft,
+          value = null;
+
+        if (type === 'min') {
+          if (outOfBounds) {
+            if (isAbove) {
+              value = isRTL ? value : this.maxValue - this.dragging.difference;
+            } else {
+              value = isRTL ? this.maxValue - this.dragging.difference : value;
+            }
+          } else {
+            value = isRTL ? this.offsetToValue(newOffset + this.dragging.lowLimit) : this.offsetToValue(newOffset - this.dragging.lowLimit)
+          }
+        } else {
+          if (outOfBounds) {
+            if (isAbove) {
+              value = isRTL ? this.minValue + this.dragging.difference : this.maxValue;
+            } else {
+              value = isRTL ? this.maxValue : this.minValue + this.dragging.difference;
+            }
+          } else {
+            if (isRTL) {
+              value = this.offsetToValue(newOffset + this.dragging.lowLimit) + this.dragging.difference
+            } else {
+              value = this.offsetToValue(newOffset - this.dragging.lowLimit) + this.dragging.difference;
+            }
+          }
+        }
+        return this.roundStep(value);
+
+
+      },
+
       /**
        * onDragMove event handler
        *
@@ -1542,27 +1678,39 @@
        */
       onDragMove: function(pointer, event) {
         var newOffset = this.getEventPosition(event),
-          newMinValue, newMaxValue;
+          newMinValue, newMaxValue,
+          ceilLimit, flrLimit,
+          isUnderFlrLimit, isOverCeilLimit,
+          flrH, ceilH;
+
+        if (this.options.rightToLeft) {
+          ceilLimit = this.dragging.lowLimit;
+          flrLimit = this.dragging.highLimit;
+          flrH = this.maxH;
+          ceilH = this.minH;
+        } else {
+          ceilLimit = this.dragging.highLimit;
+          flrLimit = this.dragging.lowLimit;
+          flrH = this.minH;
+          ceilH = this.maxH;
+        }
+        isUnderFlrLimit = newOffset <= flrLimit;
+        isOverCeilLimit = newOffset >= this.maxPos - ceilLimit;
 
-        if (newOffset <= this.dragging.lowLimit) {
-          if (this.minH.rzsp === 0)
+        if (isUnderFlrLimit) {
+          if (flrH.rzsp === 0)
             return;
-          newMinValue = this.minValue;
-          newMaxValue = this.minValue + this.dragging.difference;
-          newMaxValue = this.roundStep(newMaxValue);
-        } else if (newOffset >= this.maxPos - this.dragging.highLimit) {
-          if (this.maxH.rzsp === this.maxPos)
+          newMinValue = this.getValue('min', newOffset, true, false);
+          newMaxValue = this.getValue('max', newOffset, true, false);
+        } else if (isOverCeilLimit) {
+          if (ceilH.rzsp === this.maxPos)
             return;
-          newMaxValue = this.maxValue;
-          newMinValue = this.maxValue - this.dragging.difference;
-          newMinValue = this.roundStep(newMinValue);
+          newMaxValue = this.getValue('max', newOffset, true, true);
+          newMinValue = this.getValue('min', newOffset, true, true);
         } else {
-          newMinValue = this.offsetToValue(newOffset - this.dragging.lowLimit);
-          newMinValue = this.roundStep(newMinValue);
-          newMaxValue = newMinValue + this.dragging.difference;
-          newMaxValue = this.roundStep(newMaxValue);
+          newMinValue = this.getValue('min', newOffset, false);
+          newMaxValue = this.getValue('max', newOffset, false);
         }
-
         this.positionTrackingBar(newMinValue, newMaxValue);
       },
 

dist/rzslider.min.css

-/*! angularjs-slider - v2.9.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-02-24 */
+/*! angularjs-slider - v2.9.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-02-28 */
 rzslider{position:relative;display:inline-block;width:100%;height:4px;margin:35px 0 15px 0;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}rzslider[disabled]{cursor:not-allowed}rzslider[disabled] .rz-pointer{cursor:not-allowed;background-color:#d8e0f3}rzslider span{position:absolute;display:inline-block;white-space:nowrap}rzslider .rz-base{width:100%;height:100%;padding:0}rzslider .rz-bar-wrapper{left:0;z-index:1;width:100%;height:32px;padding-top:16px;margin-top:-16px;box-sizing:border-box}rzslider .rz-bar-wrapper.rz-draggable{cursor:move}rzslider .rz-bar{left:0;z-index:1;width:100%;height:4px;background:#d8e0f3;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}rzslider .rz-bar.rz-selection{z-index:2;background:#0db9f0;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}rzslider .rz-pointer{top:-14px;z-index:3;width:32px;height:32px;cursor:pointer;background-color:#0db9f0;-webkit-border-radius:16px;-moz-border-radius:16px;border-radius:16px}rzslider .rz-pointer:after{position:absolute;top:12px;left:12px;width:8px;height:8px;background:#fff;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;content:''}rzslider .rz-pointer:hover:after{background-color:#fff}rzslider .rz-pointer.rz-active{z-index:4}rzslider .rz-pointer.rz-active:after{background-color:#451aff}rzslider .rz-bubble{bottom:16px;padding:1px 3px;color:#55637d;cursor:default}rzslider .rz-bubble.rz-selection{top:16px}rzslider .rz-bubble.rz-limit{color:#55637d}rzslider .rz-ticks{position:absolute;top:-3px;left:0;z-index:1;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;height:0;padding:0 11px;margin:0;list-style:none;box-sizing:border-box;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}rzslider .rz-ticks .tick{width:10px;height:10px;text-align:center;cursor:pointer;background:#d8e0f3;border-radius:50%}rzslider .rz-ticks .tick.selected{background:#0db9f0}rzslider .rz-ticks .tick .tick-value{position:absolute;top:-30px;transform:translate(-50%,0)}rzslider.vertical{position:relative;width:4px;height:100%;padding:0;margin:0 20px;vertical-align:baseline}rzslider.vertical .rz-base{width:100%;height:100%;padding:0}rzslider.vertical .rz-bar-wrapper{top:auto;left:0;width:32px;height:100%;padding:0 0 0 16px;margin:0 0 0 -16px}rzslider.vertical .rz-bar{bottom:0;left:auto;width:4px;height:100%}rzslider.vertical .rz-pointer{top:auto;bottom:0;left:-14px!important}rzslider.vertical .rz-bubble{bottom:0;left:16px!important;margin-left:3px}rzslider.vertical .rz-bubble.rz-selection{top:auto;left:16px!important}rzslider.vertical .rz-ticks{top:0;left:-3px;z-index:1;width:0;height:100%;padding:11px 0;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}rzslider.vertical .rz-ticks .tick{vertical-align:middle}rzslider.vertical .rz-ticks .tick .tick-value{top:auto;right:-30px;transform:translate(0,-28%)}
\ No newline at end of file

dist/rzslider.min.js

-/*! angularjs-slider - v2.9.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-02-24 */
-!function(a,b){"use strict";"function"==typeof define&&define.amd?define(["angular"],b):"object"==typeof module&&module.exports?module.exports=b(require("angular")):b(a.angular)}(this,function(a){"use strict";var b=a.module("rzModule",[]).factory("RzSliderOptions",function(){var b={floor:0,ceil:null,step:1,precision:0,minRange:0,id:null,translate:null,stepsArray:null,draggableRange:!1,draggableRangeOnly:!1,showSelectionBar:!1,showSelectionBarEnd:!1,showSelectionBarFromValue:null,hideLimitLabels:!1,readOnly:!1,disabled:!1,interval:350,showTicks:!1,showTicksValues:!1,ticksTooltip:null,ticksValuesTooltip:null,vertical:!1,getSelectionBarColor:null,getPointerColor:null,keyboardSupport:!0,scale:1,enforceStep:!0,enforceRange:!1,noSwitching:!1,onlyBindHandles:!1,onStart:null,onChange:null,onEnd:null},c={},d={};return d.options=function(b){a.extend(c,b)},d.getOptions=function(d){return a.extend({},b,c,d)},d}).factory("rzThrottle",["$timeout",function(a){return function(b,c,d){var e,f,g,h=Date.now||function(){return(new Date).getTime()},i=null,j=0;d=d||{};var k=function(){j=h(),i=null,g=b.apply(e,f),e=f=null};return function(){var l=h(),m=c-(l-j);return e=this,f=arguments,0>=m?(a.cancel(i),i=null,j=l,g=b.apply(e,f),e=f=null):i||d.trailing===!1||(i=a(k,m)),g}}}]).factory("RzSlider",["$timeout","$document","$window","$compile","RzSliderOptions","rzThrottle",function(b,c,d,e,f,g){var h=function(a,b){this.scope=a,this.sliderElem=b,this.range=void 0!==this.scope.rzSliderModel&&void 0!==this.scope.rzSliderHigh,this.dragging={active:!1,value:0,difference:0,offset:0,lowLimit:0,highLimit:0},this.positionProperty="left",this.dimensionProperty="width",this.handleHalfDim=0,this.maxPos=0,this.precision=0,this.step=1,this.tracking="",this.minValue=0,this.maxValue=0,this.valueRange=0,this.initHasRun=!1,this.internalChange=!1,this.fullBar=null,this.selBar=null,this.minH=null,this.maxH=null,this.flrLab=null,this.ceilLab=null,this.minLab=null,this.maxLab=null,this.cmbLab=null,this.ticks=null,this.init()};return h.prototype={init:function(){var b,c,e=this,f=function(){e.calcViewDimensions()};this.applyOptions(),this.initElemHandles(),this.manageElementsStyle(),this.setDisabledState(),this.calcViewDimensions(),this.setMinAndMax(),this.addAccessibility(),this.updateCeilLab(),this.updateFloorLab(),this.initHandles(),this.manageEventsBindings(),this.scope.$on("reCalcViewDimensions",f),a.element(d).on("resize",f),this.initHasRun=!0,b=g(function(){e.onLowHandleChange()},e.options.interval),c=g(function(){e.onHighHandleChange()},e.options.interval),this.scope.$on("rzSliderForceRender",function(){e.resetLabelsValue(),b(),e.range&&c(),e.resetSlider()}),this.scope.$watch("rzSliderOptions()",function(a,b){a!==b&&(e.applyOptions(),e.resetSlider())},!0),this.scope.$watch("rzSliderModel",function(a,c){e.internalChange||a!==c&&b()}),this.scope.$watch("rzSliderHigh",function(a,b){e.internalChange||a!==b&&(null!=a&&c(),(e.range&&null==a||!e.range&&null!=a)&&(e.applyOptions(),e.resetSlider()))}),this.scope.$on("$destroy",function(){e.unbindEvents(),a.element(d).off("resize",f)})},onLowHandleChange:function(){this.setMinAndMax(),this.updateLowHandle(this.valueToOffset(this.scope.rzSliderModel)),this.updateSelectionBar(),this.updateTicksScale(),this.updateAriaAttributes(),this.range&&this.updateCmbLabel()},onHighHandleChange:function(){this.setMinAndMax(),this.updateHighHandle(this.valueToOffset(this.scope.rzSliderHigh)),this.updateSelectionBar(),this.updateTicksScale(),this.updateCmbLabel(),this.updateAriaAttributes()},applyOptions:function(){var a;a=this.scope.rzSliderOptions?this.scope.rzSliderOptions():{},this.options=f.getOptions(a),this.options.step<=0&&(this.options.step=1),this.range=void 0!==this.scope.rzSliderModel&&void 0!==this.scope.rzSliderHigh,this.options.draggableRange=this.range&&this.options.draggableRange,this.options.draggableRangeOnly=this.range&&this.options.draggableRangeOnly,this.options.draggableRangeOnly&&(this.options.draggableRange=!0),this.options.showTicks=this.options.showTicks||this.options.showTicksValues,this.scope.showTicks=this.options.showTicks,this.options.showSelectionBar=this.options.showSelectionBar||this.options.showSelectionBarEnd||null!==this.options.showSelectionBarFromValue,this.options.stepsArray?(this.options.floor=0,this.options.ceil=this.options.stepsArray.length-1,this.options.step=1,this.customTrFn=function(a){return this.options.stepsArray[a]}):this.options.translate?this.customTrFn=this.options.translate:this.customTrFn=function(a){return String(a)},this.options.vertical&&(this.positionProperty="bottom",this.dimensionProperty="height")},resetSlider:function(){this.manageElementsStyle(),this.addAccessibility(),this.setMinAndMax(),this.updateCeilLab(),this.updateFloorLab(),this.unbindEvents(),this.manageEventsBindings(),this.setDisabledState(),this.calcViewDimensions()},initElemHandles:function(){a.forEach(this.sliderElem.children(),function(b,c){var d=a.element(b);switch(c){case 0:this.fullBar=d;break;case 1:this.selBar=d;break;case 2:this.minH=d;break;case 3:this.maxH=d;break;case 4:this.flrLab=d;break;case 5:this.ceilLab=d;break;case 6:this.minLab=d;break;case 7:this.maxLab=d;break;case 8:this.cmbLab=d;break;case 9:this.ticks=d}},this),this.selBar.rzsp=0,this.minH.rzsp=0,this.maxH.rzsp=0,this.flrLab.rzsp=0,this.ceilLab.rzsp=0,this.minLab.rzsp=0,this.maxLab.rzsp=0,this.cmbLab.rzsp=0},manageElementsStyle:function(){this.range?this.maxH.css("display",""):this.maxH.css("display","none"),this.alwaysHide(this.flrLab,this.options.showTicksValues||this.options.hideLimitLabels),this.alwaysHide(this.ceilLab,this.options.showTicksValues||this.options.hideLimitLabels),this.alwaysHide(this.minLab,this.options.showTicksValues),this.alwaysHide(this.maxLab,this.options.showTicksValues||!this.range),this.alwaysHide(this.cmbLab,this.options.showTicksValues||!this.range),this.alwaysHide(this.selBar,!this.range&&!this.options.showSelectionBar),this.options.vertical&&this.sliderElem.addClass("vertical"),this.options.draggableRange?this.selBar.addClass("rz-draggable"):this.selBar.removeClass("rz-draggable")},alwaysHide:function(a,b){a.rzAlwaysHide=b,b?this.hideEl(a):this.showEl(a)},manageEventsBindings:function(){this.options.disabled||this.options.readOnly?this.unbindEvents():this.bindEvents()},setDisabledState:function(){this.options.disabled?this.sliderElem.attr("disabled","disabled"):this.sliderElem.attr("disabled",null)},resetLabelsValue:function(){this.minLab.rzsv=void 0,this.maxLab.rzsv=void 0},initHandles:function(){this.updateLowHandle(this.valueToOffset(this.scope.rzSliderModel)),this.range&&this.updateHighHandle(this.valueToOffset(this.scope.rzSliderHigh)),this.updateSelectionBar(),this.range&&this.updateCmbLabel(),this.updateTicksScale()},translateFn:function(a,b,c,d){d=void 0===d?!0:d;var e=String(d?this.customTrFn(a,this.options.id,c):a),f=!1;(void 0===b.rzsv||b.rzsv.length!==e.length||b.rzsv.length>0&&0===b.rzsd)&&(f=!0,b.rzsv=e),b.html(e),f&&this.getDimension(b)},setMinAndMax:function(){this.step=+this.options.step,this.precision=+this.options.precision,this.minValue=this.options.floor,this.options.enforceStep&&(this.scope.rzSliderModel=this.roundStep(this.scope.rzSliderModel),this.range&&(this.scope.rzSliderHigh=this.roundStep(this.scope.rzSliderHigh))),null!=this.options.ceil?this.maxValue=this.options.ceil:this.maxValue=this.options.ceil=this.range?this.scope.rzSliderHigh:this.scope.rzSliderModel,this.options.enforceRange&&(this.scope.rzSliderModel=this.sanitizeValue(this.scope.rzSliderModel),this.range&&(this.scope.rzSliderHigh=this.sanitizeValue(this.scope.rzSliderHigh))),this.valueRange=this.maxValue-this.minValue},addAccessibility:function(){this.minH.attr("role","slider"),this.updateAriaAttributes(),!this.options.keyboardSupport||this.options.readOnly||this.options.disabled?this.minH.attr("tabindex",""):this.minH.attr("tabindex","0"),this.options.vertical&&this.minH.attr("aria-orientation","vertical"),this.range&&(this.maxH.attr("role","slider"),!this.options.keyboardSupport||this.options.readOnly||this.options.disabled?this.maxH.attr("tabindex",""):this.maxH.attr("tabindex","0"),this.options.vertical&&this.maxH.attr("aria-orientation","vertical"))},updateAriaAttributes:function(){this.minH.attr({"aria-valuenow":this.scope.rzSliderModel,"aria-valuetext":this.customTrFn(this.scope.rzSliderModel,this.options.id,"model"),"aria-valuemin":this.minValue,"aria-valuemax":this.maxValue}),this.range&&this.maxH.attr({"aria-valuenow":this.scope.rzSliderHigh,"aria-valuetext":this.customTrFn(this.scope.rzSliderHigh,this.options.id,"high"),"aria-valuemin":this.minValue,"aria-valuemax":this.maxValue})},calcViewDimensions:function(){var a=this.getDimension(this.minH);this.handleHalfDim=a/2,this.barDimension=this.getDimension(this.fullBar),this.maxPos=this.barDimension-a,this.getDimension(this.sliderElem),this.sliderElem.rzsp=this.sliderElem[0].getBoundingClientRect()[this.positionProperty],this.initHasRun&&(this.updateFloorLab(),this.updateCeilLab(),this.initHandles())},updateTicksScale:function(){if(this.options.showTicks){var a=Math.round((this.maxValue-this.minValue)/this.step)+1;this.scope.ticks=[];for(var b=0;a>b;b++){var c=this.roundStep(this.minValue+b*this.step),d={selected:this.isTickSelected(c)};d.selected&&this.options.getSelectionBarColor&&(d.style={"background-color":this.getSelectionBarColor()}),this.options.ticksTooltip&&(d.tooltip=this.options.ticksTooltip(c),d.tooltipPlacement=this.options.vertical?"right":"top"),this.options.showTicksValues&&(d.value=this.getDisplayValue(c,"tick-value"),this.options.ticksValuesTooltip&&(d.valueTooltip=this.options.ticksValuesTooltip(c),d.valueTooltipPlacement=this.options.vertical?"right":"top")),this.scope.ticks.push(d)}}},isTickSelected:function(a){if(!this.range)if(null!==this.options.showSelectionBarFromValue){var b=this.options.showSelectionBarFromValue;if(this.scope.rzSliderModel>b&&a>=b&&a<=this.scope.rzSliderModel)return!0;if(this.scope.rzSliderModel<b&&b>=a&&a>=this.scope.rzSliderModel)return!0}else if(this.options.showSelectionBarEnd){if(a>=this.scope.rzSliderModel)return!0}else if(this.options.showSelectionBar&&a<=this.scope.rzSliderModel)return!0;return this.range&&a>=this.scope.rzSliderModel&&a<=this.scope.rzSliderHigh?!0:!1},updateCeilLab:function(){this.translateFn(this.maxValue,this.ceilLab,"ceil"),this.setPosition(this.ceilLab,this.barDimension-this.ceilLab.rzsd),this.getDimension(this.ceilLab)},updateFloorLab:function(){this.translateFn(this.minValue,this.flrLab,"floor"),this.getDimension(this.flrLab)},callOnStart:function(){if(this.options.onStart){var a=this;this.scope.$evalAsync(function(){a.options.onStart(a.options.id,a.scope.rzSliderModel,a.scope.rzSliderHigh)})}},callOnChange:function(){if(this.options.onChange){var a=this;this.scope.$evalAsync(function(){a.options.onChange(a.options.id,a.scope.rzSliderModel,a.scope.rzSliderHigh)})}},callOnEnd:function(){if(this.options.onEnd){var a=this;this.scope.$evalAsync(function(){a.options.onEnd(a.options.id,a.scope.rzSliderModel,a.scope.rzSliderHigh)})}},updateHandles:function(a,b){"rzSliderModel"===a?this.updateLowHandle(b):this.updateHighHandle(b),this.updateSelectionBar(),this.updateTicksScale(),this.range&&this.updateCmbLabel()},updateLowHandle:function(a){this.setPosition(this.minH,a),this.translateFn(this.scope.rzSliderModel,this.minLab,"model");var b=Math.min(Math.max(a-this.minLab.rzsd/2+this.handleHalfDim,0),this.barDimension-this.minLab.rzsd);if(this.setPosition(this.minLab,b),this.options.getPointerColor){var c=this.getPointerColor("min");this.scope.minPointerStyle={backgroundColor:c}}this.shFloorCeil()},updateHighHandle:function(a){this.setPosition(this.maxH,a),this.translateFn(this.scope.rzSliderHigh,this.maxLab,"high");var b=Math.min(a-this.maxLab.rzsd/2+this.handleHalfDim,this.barDimension-this.maxLab.rzsd);if(this.setPosition(this.maxLab,b),this.options.getPointerColor){var c=this.getPointerColor("max");this.scope.maxPointerStyle={backgroundColor:c}}this.shFloorCeil()},shFloorCeil:function(){var a=!1,b=!1;this.minLab.rzsp<=this.flrLab.rzsp+this.flrLab.rzsd+5?(a=!0,this.hideEl(this.flrLab)):(a=!1,this.showEl(this.flrLab)),this.minLab.rzsp+this.minLab.rzsd>=this.ceilLab.rzsp-this.handleHalfDim-10?(b=!0,this.hideEl(this.ceilLab)):(b=!1,this.showEl(this.ceilLab)),this.range&&(this.maxLab.rzsp+this.maxLab.rzsd>=this.ceilLab.rzsp-10?this.hideEl(this.ceilLab):b||this.showEl(this.ceilLab),this.maxLab.rzsp<=this.flrLab.rzsp+this.flrLab.rzsd+this.handleHalfDim?this.hideEl(this.flrLab):a||this.showEl(this.flrLab))},updateSelectionBar:function(){var a=0,b=0;if(this.range)b=Math.abs(this.maxH.rzsp-this.minH.rzsp),a=this.minH.rzsp+this.handleHalfDim;else if(null!==this.options.showSelectionBarFromValue){var c=this.options.showSelectionBarFromValue,d=this.valueToOffset(c);this.scope.rzSliderModel>c?(b=this.minH.rzsp-d,a=d+this.handleHalfDim):(b=d-this.minH.rzsp,a=this.minH.rzsp+this.handleHalfDim)}else this.options.showSelectionBarEnd?(b=Math.abs(this.maxPos-this.minH.rzsp)+this.handleHalfDim,a=this.minH.rzsp+this.handleHalfDim):(b=Math.abs(this.maxH.rzsp-this.minH.rzsp)+this.handleHalfDim,a=0);if(this.setDimension(this.selBar,b),this.setPosition(this.selBar,a),this.options.getSelectionBarColor){var e=this.getSelectionBarColor();this.scope.barStyle={backgroundColor:e}}},getSelectionBarColor:function(){return this.range?this.options.getSelectionBarColor(this.scope.rzSliderModel,this.scope.rzSliderHigh):this.options.getSelectionBarColor(this.scope.rzSliderModel)},getPointerColor:function(a){return"max"===a?this.options.getPointerColor(this.scope.rzSliderHigh,a):this.options.getPointerColor(this.scope.rzSliderModel,a)},updateCmbLabel:function(){if(this.minLab.rzsp+this.minLab.rzsd+10>=this.maxLab.rzsp){var a=this.getDisplayValue(this.scope.rzSliderModel,"model"),b=this.getDisplayValue(this.scope.rzSliderHigh,"high"),c=a===b?a:a+" - "+b;this.translateFn(c,this.cmbLab,"cmb",!1);var d=Math.min(Math.max(this.selBar.rzsp+this.selBar.rzsd/2-this.cmbLab.rzsd/2,0),this.barDimension-this.cmbLab.rzsd);this.setPosition(this.cmbLab,d),this.hideEl(this.minLab),this.hideEl(this.maxLab),this.showEl(this.cmbLab)}else this.showEl(this.maxLab),this.showEl(this.minLab),this.hideEl(this.cmbLab)},getDisplayValue:function(a,b){return this.customTrFn(a,this.options.id,b)},roundStep:function(a){var b=parseFloat((a-this.minValue)/this.step).toPrecision(12);b=Math.round(b)*this.step;var c=(this.minValue+b).toFixed(this.precision);return+c},hideEl:function(a){return a.css({opacity:0})},showEl:function(a){return a.rzAlwaysHide?a:a.css({opacity:1})},setPosition:function(a,b){a.rzsp=b;var c={};return c[this.positionProperty]=b+"px",a.css(c),b},getDimension:function(a){var b=a[0].getBoundingClientRect();return this.options.vertical?a.rzsd=(b.bottom-b.top)*this.options.scale:a.rzsd=(b.right-b.left)*this.options.scale,a.rzsd},setDimension:function(a,b){a.rzsd=b;var c={};return c[this.dimensionProperty]=b+"px",a.css(c),b},valueToOffset:function(a){return(this.sanitizeValue(a)-this.minValue)*this.maxPos/this.valueRange||0},sanitizeValue:function(a){return Math.min(Math.max(a,this.minValue),this.maxValue)},offsetToValue:function(a){return a/this.maxPos*this.valueRange+this.minValue},getEventXY:function(a){var b=this.options.vertical?"clientY":"clientX";return b in a?a[b]:void 0===a.originalEvent?a.touches[0][b]:a.originalEvent.touches[0][b]},getEventPosition:function(a){var b=this.sliderElem.rzsp,c=0;return c=this.options.vertical?-this.getEventXY(a)+b:this.getEventXY(a)-b,(c-this.handleHalfDim)*this.options.scale},getEventNames:function(a){var b={moveEvent:"",endEvent:""};return a.touches||void 0!==a.originalEvent&&a.originalEvent.touches?(b.moveEvent="touchmove",b.endEvent="touchend"):(b.moveEvent="mousemove",b.endEvent="mouseup"),b},getNearestHandle:function(a){if(!this.range)return this.minH;var b=this.getEventPosition(a),c=Math.abs(b-this.minH.rzsp),d=Math.abs(b-this.maxH.rzsp);return d>c?this.minH:c>d?this.maxH:b<this.minH.rzsp?this.minH:this.maxH},focusElement:function(a){var b=0;a[b].focus()},bindEvents:function(){var b,c,d;this.options.draggableRange?(b="rzSliderDrag",c=this.onDragStart,d=this.onDragMove):(b="rzSliderModel",c=this.onStart,d=this.onMove),this.options.onlyBindHandles||(this.selBar.on("mousedown",a.bind(this,c,null,b)),this.selBar.on("mousedown",a.bind(this,d,this.selBar))),this.options.draggableRangeOnly?(this.minH.on("mousedown",a.bind(this,c,null,b)),this.maxH.on("mousedown",a.bind(this,c,null,b))):(this.minH.on("mousedown",a.bind(this,this.onStart,this.minH,"rzSliderModel")),this.range&&this.maxH.on("mousedown",a.bind(this,this.onStart,this.maxH,"rzSliderHigh")),this.options.onlyBindHandles||(this.fullBar.on("mousedown",a.bind(this,this.onStart,null,null)),this.fullBar.on("mousedown",a.bind(this,this.onMove,this.fullBar)),this.ticks.on("mousedown",a.bind(this,this.onStart,null,null)),this.ticks.on("mousedown",a.bind(this,this.onMove,this.ticks)))),this.options.onlyBindHandles||(this.selBar.on("touchstart",a.bind(this,c,null,b)),this.selBar.on("touchstart",a.bind(this,d,this.selBar))),this.options.draggableRangeOnly?(this.minH.on("touchstart",a.bind(this,c,null,b)),this.maxH.on("touchstart",a.bind(this,c,null,b))):(this.minH.on("touchstart",a.bind(this,this.onStart,this.minH,"rzSliderModel")),this.range&&this.maxH.on("touchstart",a.bind(this,this.onStart,this.maxH,"rzSliderHigh")),this.options.onlyBindHandles||(this.fullBar.on("touchstart",a.bind(this,this.onStart,null,null)),this.fullBar.on("touchstart",a.bind(this,this.onMove,this.fullBar)),this.ticks.on("touchstart",a.bind(this,this.onStart,null,null)),this.ticks.on("touchstart",a.bind(this,this.onMove,this.ticks)))),this.options.keyboardSupport&&(this.minH.on("focus",a.bind(this,this.onPointerFocus,this.minH,"rzSliderModel")),this.range&&this.maxH.on("focus",a.bind(this,this.onPointerFocus,this.maxH,"rzSliderHigh")))},unbindEvents:function(){this.minH.off(),this.maxH.off(),this.fullBar.off(),this.selBar.off(),this.ticks.off()},onStart:function(b,d,e){var f,g,h=this.getEventNames(e);e.stopPropagation(),e.preventDefault(),this.calcViewDimensions(),b?this.tracking=d:(b=this.getNearestHandle(e),this.tracking=b===this.minH?"rzSliderModel":"rzSliderHigh"),b.addClass("rz-active"),this.options.keyboardSupport&&this.focusElement(b),f=a.bind(this,this.dragging.active?this.onDragMove:this.onMove,b),g=a.bind(this,this.onEnd,f),c.on(h.moveEvent,f),c.one(h.endEvent,g),this.callOnStart()},onMove:function(a,b){var c,d=this.getEventPosition(b);0>=d?c=this.minValue:d>=this.maxPos?c=this.maxValue:(c=this.offsetToValue(d),c=this.roundStep(c)),this.positionTrackingHandle(c)},onEnd:function(a,b){var d=this.getEventNames(b).moveEvent;this.options.keyboardSupport||(this.minH.removeClass("rz-active"),this.maxH.removeClass("rz-active"),this.tracking=""),this.dragging.active=!1,c.off(d,a),this.scope.$emit("slideEnded"),this.callOnEnd()},onPointerFocus:function(b,c){this.tracking=c,b.one("blur",a.bind(this,this.onPointerBlur,b)),b.on("keydown",a.bind(this,this.onKeyboardEvent)),b.addClass("rz-active")},onPointerBlur:function(a){a.off("keydown"),this.tracking="",a.removeClass("rz-active")},onKeyboardEvent:function(a){var b=this.scope[this.tracking],c=a.keyCode||a.which,d={38:"UP",40:"DOWN",37:"LEFT",39:"RIGHT",33:"PAGEUP",34:"PAGEDOWN",36:"HOME",35:"END"},e={UP:b+this.step,DOWN:b-this.step,LEFT:b-this.step,RIGHT:b+this.step,PAGEUP:b+this.valueRange/10,PAGEDOWN:b-this.valueRange/10,HOME:this.minValue,END:this.maxValue},f=d[c],g=e[f];if(null!=g&&""!==this.tracking){a.preventDefault();var h=this.roundStep(this.sanitizeValue(g));if(this.options.draggableRangeOnly){var i,j,k=this.scope.rzSliderHigh-this.scope.rzSliderModel;"rzSliderModel"===this.tracking?(i=h,j=h+k,j>this.maxValue&&(j=this.maxValue,i=j-k)):(j=h,i=h-k,i<this.minValue&&(i=this.minValue,j=i+k)),this.positionTrackingBar(i,j)}else this.positionTrackingHandle(h)}},onDragStart:function(a,b,c){var d=this.getEventPosition(c);this.dragging={active:!0,value:this.offsetToValue(d),difference:this.scope.rzSliderHigh-this.scope.rzSliderModel,lowLimit:d-this.minH.rzsp,highLimit:this.maxH.rzsp-d},this.onStart(a,b,c)},onDragMove:function(a,b){var c,d,e=this.getEventPosition(b);if(e<=this.dragging.lowLimit){if(0===this.minH.rzsp)return;c=this.minValue,d=this.minValue+this.dragging.difference,d=this.roundStep(d)}else if(e>=this.maxPos-this.dragging.highLimit){if(this.maxH.rzsp===this.maxPos)return;d=this.maxValue,c=this.maxValue-this.dragging.difference,c=this.roundStep(c)}else c=this.offsetToValue(e-this.dragging.lowLimit),c=this.roundStep(c),d=c+this.dragging.difference,d=this.roundStep(d);this.positionTrackingBar(c,d)},positionTrackingBar:function(a,b){this.scope.rzSliderModel=a,this.scope.rzSliderHigh=b,this.updateHandles("rzSliderModel",this.valueToOffset(a)),this.updateHandles("rzSliderHigh",this.valueToOffset(b)),this.applyModel()},positionTrackingHandle:function(a){var b=!1;this.range&&(a=this.applyMinRange(a),"rzSliderModel"===this.tracking&&a>this.scope.rzSliderHigh?(this.options.noSwitching&&this.scope.rzSliderHigh!==this.minValue?a=this.applyMinRange(this.scope.rzSliderHigh):(this.scope[this.tracking]=this.scope.rzSliderHigh,this.updateHandles(this.tracking,this.maxH.rzsp),this.updateAriaAttributes(),this.tracking="rzSliderHigh",this.minH.removeClass("rz-active"),this.maxH.addClass("rz-active"),this.options.keyboardSupport&&this.focusElement(this.maxH)),b=!0):"rzSliderHigh"===this.tracking&&a<this.scope.rzSliderModel&&(this.options.noSwitching&&this.scope.rzSliderModel!==this.maxValue?a=this.applyMinRange(this.scope.rzSliderModel):(this.scope[this.tracking]=this.scope.rzSliderModel,this.updateHandles(this.tracking,this.minH.rzsp),this.updateAriaAttributes(),this.tracking="rzSliderModel",this.maxH.removeClass("rz-active"),this.minH.addClass("rz-active"),this.options.keyboardSupport&&this.focusElement(this.minH)),b=!0)),this.scope[this.tracking]!==a&&(this.scope[this.tracking]=a,this.updateHandles(this.tracking,this.valueToOffset(a)),this.updateAriaAttributes(),b=!0),b&&this.applyModel()},applyMinRange:function(a){if(0!==this.options.minRange){var b="rzSliderModel"===this.tracking?this.scope.rzSliderHigh:this.scope.rzSliderModel,c=Math.abs(a-b);if(c<this.options.minRange)return"rzSliderModel"===this.tracking?this.scope.rzSliderHigh-this.options.minRange:this.scope.rzSliderModel+this.options.minRange}return a},applyModel:function(){this.internalChange=!0,this.scope.$apply(),this.callOnChange(),this.internalChange=!1}},h}]).directive("rzslider",["RzSlider",function(a){return{restrict:"E",scope:{rzSliderModel:"=?",rzSliderHigh:"=?",rzSliderOptions:"&?",rzSliderTplUrl:"@"},templateUrl:function(a,b){return b.rzSliderTplUrl||"rzSliderTpl.html"},link:function(b,c){b.slider=new a(b,c)}}}]);return b.run(["$templateCache",function(a){a.put("rzSliderTpl.html",'<span class=rz-bar-wrapper><span class=rz-bar></span></span> <span class=rz-bar-wrapper><span class="rz-bar rz-selection" ng-style=barStyle></span></span> <span class="rz-pointer rz-pointer-min" ng-style=minPointerStyle></span> <span class="rz-pointer rz-pointer-max" ng-style=maxPointerStyle></span> <span class="rz-bubble rz-limit"></span> <span class="rz-bubble rz-limit"></span> <span class=rz-bubble></span> <span class=rz-bubble></span> <span class=rz-bubble></span><ul ng-show=showTicks class=rz-ticks><li ng-repeat="t in ticks track by $index" class=tick ng-class="{selected: t.selected}" ng-style=t.style ng-attr-uib-tooltip="{{ t.tooltip }}" ng-attr-tooltip-placement={{t.tooltipPlacement}} ng-attr-tooltip-append-to-body="{{ t.tooltip ? true : undefined}}"><span ng-if="t.value != null" class=tick-value ng-attr-uib-tooltip="{{ t.valueTooltip }}" ng-attr-tooltip-placement={{t.valueTooltipPlacement}}>{{ t.value }}</span></li></ul>')}]),b});
\ No newline at end of file
+/*! angularjs-slider - v2.9.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-02-28 */
+!function(a,b){"use strict";"function"==typeof define&&define.amd?define(["angular"],b):"object"==typeof module&&module.exports?module.exports=b(require("angular")):b(a.angular)}(this,function(a){"use strict";var b=a.module("rzModule",[]).factory("RzSliderOptions",function(){var b={floor:0,ceil:null,step:1,precision:0,minRange:0,id:null,translate:null,stepsArray:null,draggableRange:!1,draggableRangeOnly:!1,showSelectionBar:!1,showSelectionBarEnd:!1,showSelectionBarFromValue:null,hideLimitLabels:!1,readOnly:!1,disabled:!1,interval:350,showTicks:!1,showTicksValues:!1,ticksTooltip:null,ticksValuesTooltip:null,vertical:!1,getSelectionBarColor:null,getPointerColor:null,keyboardSupport:!0,scale:1,enforceStep:!0,enforceRange:!1,noSwitching:!1,onlyBindHandles:!1,onStart:null,onChange:null,onEnd:null,rightToLeft:!1},c={},d={};return d.options=function(b){a.extend(c,b)},d.getOptions=function(d){return a.extend({},b,c,d)},d}).factory("rzThrottle",["$timeout",function(a){return function(b,c,d){var e,f,g,h=Date.now||function(){return(new Date).getTime()},i=null,j=0;d=d||{};var k=function(){j=h(),i=null,g=b.apply(e,f),e=f=null};return function(){var l=h(),m=c-(l-j);return e=this,f=arguments,0>=m?(a.cancel(i),i=null,j=l,g=b.apply(e,f),e=f=null):i||d.trailing===!1||(i=a(k,m)),g}}}]).factory("RzSlider",["$timeout","$document","$window","$compile","RzSliderOptions","rzThrottle",function(b,c,d,e,f,g){var h=function(a,b){this.scope=a,this.sliderElem=b,this.range=void 0!==this.scope.rzSliderModel&&void 0!==this.scope.rzSliderHigh,this.dragging={active:!1,value:0,difference:0,offset:0,lowLimit:0,highLimit:0},this.positionProperty="left",this.dimensionProperty="width",this.handleHalfDim=0,this.maxPos=0,this.precision=0,this.step=1,this.tracking="",this.minValue=0,this.maxValue=0,this.valueRange=0,this.initHasRun=!1,this.internalChange=!1,this.fullBar=null,this.selBar=null,this.minH=null,this.maxH=null,this.flrLab=null,this.ceilLab=null,this.minLab=null,this.maxLab=null,this.cmbLab=null,this.ticks=null,this.init()};return h.prototype={init:function(){var b,c,e=this,f=function(){e.calcViewDimensions()};this.applyOptions(),this.initElemHandles(),this.manageElementsStyle(),this.setDisabledState(),this.calcViewDimensions(),this.setMinAndMax(),this.addAccessibility(),this.updateCeilLab(),this.updateFloorLab(),this.initHandles(),this.manageEventsBindings(),this.scope.$on("reCalcViewDimensions",f),a.element(d).on("resize",f),this.initHasRun=!0,b=g(function(){e.onLowHandleChange()},e.options.interval),c=g(function(){e.onHighHandleChange()},e.options.interval),this.scope.$on("rzSliderForceRender",function(){e.resetLabelsValue(),b(),e.range&&c(),e.resetSlider()}),this.scope.$watch("rzSliderOptions()",function(a,b){a!==b&&(e.applyOptions(),e.resetSlider())},!0),this.scope.$watch("rzSliderModel",function(a,c){e.internalChange||a!==c&&b()}),this.scope.$watch("rzSliderHigh",function(a,b){e.internalChange||a!==b&&(null!=a&&c(),(e.range&&null==a||!e.range&&null!=a)&&(e.applyOptions(),e.resetSlider()))}),this.scope.$on("$destroy",function(){e.unbindEvents(),a.element(d).off("resize",f)})},onLowHandleChange:function(){this.setMinAndMax(),this.updateLowHandle(this.valueToOffset(this.scope.rzSliderModel)),this.updateSelectionBar(),this.updateTicksScale(),this.updateAriaAttributes(),this.range&&this.updateCmbLabel()},onHighHandleChange:function(){this.setMinAndMax(),this.updateHighHandle(this.valueToOffset(this.scope.rzSliderHigh)),this.updateSelectionBar(),this.updateTicksScale(),this.updateCmbLabel(),this.updateAriaAttributes()},applyOptions:function(){var a;a=this.scope.rzSliderOptions?this.scope.rzSliderOptions():{},this.options=f.getOptions(a),this.options.step<=0&&(this.options.step=1),this.range=void 0!==this.scope.rzSliderModel&&void 0!==this.scope.rzSliderHigh,this.options.draggableRange=this.range&&this.options.draggableRange,this.options.draggableRangeOnly=this.range&&this.options.draggableRangeOnly,this.options.draggableRangeOnly&&(this.options.draggableRange=!0),this.options.showTicks=this.options.showTicks||this.options.showTicksValues,this.scope.showTicks=this.options.showTicks,this.options.showSelectionBar=this.options.showSelectionBar||this.options.showSelectionBarEnd||null!==this.options.showSelectionBarFromValue,this.options.stepsArray?(this.options.floor=0,this.options.ceil=this.options.stepsArray.length-1,this.options.step=1,this.customTrFn=function(a){return this.options.stepsArray[a]}):this.options.translate?this.customTrFn=this.options.translate:this.customTrFn=function(a){return String(a)},this.options.vertical&&(this.positionProperty="bottom",this.dimensionProperty="height")},resetSlider:function(){this.manageElementsStyle(),this.addAccessibility(),this.setMinAndMax(),this.updateCeilLab(),this.updateFloorLab(),this.unbindEvents(),this.manageEventsBindings(),this.setDisabledState(),this.calcViewDimensions()},initElemHandles:function(){a.forEach(this.sliderElem.children(),function(b,c){var d=a.element(b);switch(c){case 0:this.fullBar=d;break;case 1:this.selBar=d;break;case 2:this.minH=d;break;case 3:this.maxH=d;break;case 4:this.flrLab=d;break;case 5:this.ceilLab=d;break;case 6:this.minLab=d;break;case 7:this.maxLab=d;break;case 8:this.cmbLab=d;break;case 9:this.ticks=d}},this),this.selBar.rzsp=0,this.minH.rzsp=0,this.maxH.rzsp=0,this.flrLab.rzsp=0,this.ceilLab.rzsp=0,this.minLab.rzsp=0,this.maxLab.rzsp=0,this.cmbLab.rzsp=0},manageElementsStyle:function(){this.range?this.maxH.css("display",""):this.maxH.css("display","none"),this.alwaysHide(this.flrLab,this.options.showTicksValues||this.options.hideLimitLabels),this.alwaysHide(this.ceilLab,this.options.showTicksValues||this.options.hideLimitLabels),this.alwaysHide(this.minLab,this.options.showTicksValues),this.alwaysHide(this.maxLab,this.options.showTicksValues||!this.range),this.alwaysHide(this.cmbLab,this.options.showTicksValues||!this.range),this.alwaysHide(this.selBar,!this.range&&!this.options.showSelectionBar),this.options.vertical&&this.sliderElem.addClass("vertical"),this.options.draggableRange?this.selBar.addClass("rz-draggable"):this.selBar.removeClass("rz-draggable")},alwaysHide:function(a,b){a.rzAlwaysHide=b,b?this.hideEl(a):this.showEl(a)},manageEventsBindings:function(){this.options.disabled||this.options.readOnly?this.unbindEvents():this.bindEvents()},setDisabledState:function(){this.options.disabled?this.sliderElem.attr("disabled","disabled"):this.sliderElem.attr("disabled",null)},resetLabelsValue:function(){this.minLab.rzsv=void 0,this.maxLab.rzsv=void 0},initHandles:function(){this.updateLowHandle(this.valueToOffset(this.scope.rzSliderModel)),this.range&&this.updateHighHandle(this.valueToOffset(this.scope.rzSliderHigh)),this.updateSelectionBar(),this.range&&this.updateCmbLabel(),this.updateTicksScale()},translateFn:function(a,b,c,d){d=void 0===d?!0:d;var e=String(d?this.customTrFn(a,this.options.id,c):a),f=!1;(void 0===b.rzsv||b.rzsv.length!==e.length||b.rzsv.length>0&&0===b.rzsd)&&(f=!0,b.rzsv=e),b.html(e),f&&this.getDimension(b)},setMinAndMax:function(){this.step=+this.options.step,this.precision=+this.options.precision,this.minValue=this.options.floor,this.options.enforceStep&&(this.scope.rzSliderModel=this.roundStep(this.scope.rzSliderModel),this.range&&(this.scope.rzSliderHigh=this.roundStep(this.scope.rzSliderHigh))),null!=this.options.ceil?this.maxValue=this.options.ceil:this.maxValue=this.options.ceil=this.range?this.scope.rzSliderHigh:this.scope.rzSliderModel,this.options.enforceRange&&(this.scope.rzSliderModel=this.sanitizeValue(this.scope.rzSliderModel),this.range&&(this.scope.rzSliderHigh=this.sanitizeValue(this.scope.rzSliderHigh))),this.valueRange=this.maxValue-this.minValue},addAccessibility:function(){this.minH.attr("role","slider"),this.updateAriaAttributes(),!this.options.keyboardSupport||this.options.readOnly||this.options.disabled?this.minH.attr("tabindex",""):this.minH.attr("tabindex","0"),this.options.vertical&&this.minH.attr("aria-orientation","vertical"),this.range&&(this.maxH.attr("role","slider"),!this.options.keyboardSupport||this.options.readOnly||this.options.disabled?this.maxH.attr("tabindex",""):this.maxH.attr("tabindex","0"),this.options.vertical&&this.maxH.attr("aria-orientation","vertical"))},updateAriaAttributes:function(){this.minH.attr({"aria-valuenow":this.scope.rzSliderModel,"aria-valuetext":this.customTrFn(this.scope.rzSliderModel,this.options.id,"model"),"aria-valuemin":this.minValue,"aria-valuemax":this.maxValue}),this.range&&this.maxH.attr({"aria-valuenow":this.scope.rzSliderHigh,"aria-valuetext":this.customTrFn(this.scope.rzSliderHigh,this.options.id,"high"),"aria-valuemin":this.minValue,"aria-valuemax":this.maxValue})},calcViewDimensions:function(){var a=this.getDimension(this.minH);this.handleHalfDim=a/2,this.barDimension=this.getDimension(this.fullBar),this.maxPos=this.barDimension-a,this.getDimension(this.sliderElem),this.sliderElem.rzsp=this.sliderElem[0].getBoundingClientRect()[this.positionProperty],this.initHasRun&&(this.updateFloorLab(),this.updateCeilLab(),this.initHandles())},updateTicksScale:function(){if(this.options.showTicks){var a=Math.round((this.maxValue-this.minValue)/this.step)+1;this.scope.ticks=[];for(var b=0;a>b;b++){var c=this.roundStep(this.minValue+b*this.step),d={selected:this.isTickSelected(c)};d.selected&&this.options.getSelectionBarColor&&(d.style={"background-color":this.getSelectionBarColor()}),this.options.ticksTooltip&&(d.tooltip=this.options.ticksTooltip(c),d.tooltipPlacement=this.options.vertical?"right":"top"),this.options.showTicksValues&&(d.value=this.getDisplayValue(c,"tick-value"),this.options.ticksValuesTooltip&&(d.valueTooltip=this.options.ticksValuesTooltip(c),d.valueTooltipPlacement=this.options.vertical?"right":"top")),this.options.rightToLeft?this.scope.ticks.unshift(d):this.scope.ticks.push(d)}}},isTickSelected:function(a){if(!this.range)if(null!==this.options.showSelectionBarFromValue){var b=this.options.showSelectionBarFromValue;if(this.scope.rzSliderModel>b&&a>=b&&a<=this.scope.rzSliderModel)return!0;if(this.scope.rzSliderModel<b&&b>=a&&a>=this.scope.rzSliderModel)return!0}else if(this.options.showSelectionBarEnd){if(a>=this.scope.rzSliderModel)return!0}else if(this.options.showSelectionBar&&a<=this.scope.rzSliderModel)return!0;return this.range&&a>=this.scope.rzSliderModel&&a<=this.scope.rzSliderHigh?!0:!1},updateCeilLab:function(){this.translateFn(this.maxValue,this.ceilLab,"ceil");var a=this.options.rightToLeft?0:this.barDimension-this.ceilLab.rzsd;this.setPosition(this.ceilLab,a),this.getDimension(this.ceilLab)},updateFloorLab:function(){this.translateFn(this.minValue,this.flrLab,"floor");var a=this.options.rightToLeft?0:this.barDimension-this.flrLab.rzsd;this.setPosition(this.flrLab,a),this.getDimension(this.flrLab)},callOnStart:function(){if(this.options.onStart){var a=this;this.scope.$evalAsync(function(){a.options.onStart(a.options.id,a.scope.rzSliderModel,a.scope.rzSliderHigh)})}},callOnChange:function(){if(this.options.onChange){var a=this;this.scope.$evalAsync(function(){a.options.onChange(a.options.id,a.scope.rzSliderModel,a.scope.rzSliderHigh)})}},callOnEnd:function(){if(this.options.onEnd){var a=this;this.scope.$evalAsync(function(){a.options.onEnd(a.options.id,a.scope.rzSliderModel,a.scope.rzSliderHigh)})}},updateHandles:function(a,b){"rzSliderModel"===a?this.updateLowHandle(b):this.updateHighHandle(b),this.updateSelectionBar(),this.updateTicksScale(),this.range&&this.updateCmbLabel()},getHandleLabelPos:function(a,b){var c=this[a].rzsd,d=b-c/2+this.handleHalfDim,e=this.barDimension-c;return this.options.rightToLeft&&"minLab"===a||!this.options.rightToLeft&&"maxLab"===a?Math.min(d,e):Math.min(Math.max(d,0),e)},updateLowHandle:function(a){if(this.setPosition(this.minH,a),this.translateFn(this.scope.rzSliderModel,this.minLab,"model"),this.setPosition(this.minLab,this.getHandleLabelPos("minLab",a)),this.options.getPointerColor){var b=this.getPointerColor("min");this.scope.minPointerStyle={backgroundColor:b}}this.shFloorCeil()},updateHighHandle:function(a){if(this.setPosition(this.maxH,a),this.translateFn(this.scope.rzSliderHigh,this.maxLab,"high"),this.setPosition(this.maxLab,this.getHandleLabelPos("maxLab",a)),this.options.getPointerColor){var b=this.getPointerColor("max");this.scope.maxPointerStyle={backgroundColor:b}}this.shFloorCeil()},shFloorCeil:function(){var a=!1,b=!1,c=this.options.rightToLeft,d=this.flrLab.rzsp,e=this.flrLab.rzsd,f=this.minLab.rzsp,g=this.minLab.rzsd,h=this.maxLab.rzsp,i=this.maxLab.rzsd,j=this.ceilLab.rzsp,k=this.handleHalfDim,l=c?f+g>=d-e-5:d+e+5>=f,m=c?j+k+10>=f-g:f+g>=j-k-10,n=c?h>=d-e-k:d+e+k>=h,o=c?j+10>=h-i:h+i>=j-10;l?(a=!0,this.hideEl(this.flrLab)):(a=!1,this.showEl(this.flrLab)),m?(b=!0,this.hideEl(this.ceilLab)):(b=!1,this.showEl(this.ceilLab)),this.range&&(o?this.hideEl(this.ceilLab):b||this.showEl(this.ceilLab),n?this.hideEl(this.flrLab):a||this.showEl(this.flrLab))},updateSelectionBar:function(){var a=0,b=0,c=this.options.rightToLeft?!this.options.showSelectionBarEnd:this.options.showSelectionBarEnd,d=this.options.rightToLeft?this.maxH.rzsp+this.handleHalfDim:this.minH.rzsp+this.handleHalfDim;if(this.range)b=Math.abs(this.maxH.rzsp-this.minH.rzsp),a=d;else if(null!==this.options.showSelectionBarFromValue){var e=this.options.showSelectionBarFromValue,f=this.valueToOffset(e),g=this.options.rightToLeft?this.scope.rzSliderModel<=e:this.scope.rzSliderModel>e;g?(b=this.minH.rzsp-f,a=f+this.handleHalfDim):(b=f-this.minH.rzsp,a=this.minH.rzsp+this.handleHalfDim)}else c?(b=Math.abs(this.maxPos-this.minH.rzsp)+this.handleHalfDim,a=this.minH.rzsp+this.handleHalfDim):(b=Math.abs(this.maxH.rzsp-this.minH.rzsp)+this.handleHalfDim,a=0);if(this.setDimension(this.selBar,b),this.setPosition(this.selBar,a),this.options.getSelectionBarColor){var h=this.getSelectionBarColor();this.scope.barStyle={backgroundColor:h}}},getSelectionBarColor:function(){return this.range?this.options.getSelectionBarColor(this.scope.rzSliderModel,this.scope.rzSliderHigh):this.options.getSelectionBarColor(this.scope.rzSliderModel)},getPointerColor:function(a){return"max"===a?this.options.getPointerColor(this.scope.rzSliderHigh,a):this.options.getPointerColor(this.scope.rzSliderModel,a)},updateCmbLabel:function(){var a=null;if(a=this.options.rightToLeft?this.minLab.rzsp-this.minLab.rzsd-10<=this.maxLab.rzsp:this.minLab.rzsp+this.minLab.rzsd+10>=this.maxLab.rzsp){var b=this.getDisplayValue(this.scope.rzSliderModel,"model"),c=this.getDisplayValue(this.scope.rzSliderHigh,"high"),d="";d=b===c?b:this.options.rightToLeft?c+" - "+b:b+" - "+c,this.translateFn(d,this.cmbLab,"cmb",!1);var e=Math.min(Math.max(this.selBar.rzsp+this.selBar.rzsd/2-this.cmbLab.rzsd/2,0),this.barDimension-this.cmbLab.rzsd);this.setPosition(this.cmbLab,e),this.hideEl(this.minLab),this.hideEl(this.maxLab),this.showEl(this.cmbLab)}else this.showEl(this.maxLab),this.showEl(this.minLab),this.hideEl(this.cmbLab)},getDisplayValue:function(a,b){return this.customTrFn(a,this.options.id,b)},roundStep:function(a){var b=parseFloat((a-this.minValue)/this.step).toPrecision(12);b=Math.round(b)*this.step;var c=(this.minValue+b).toFixed(this.precision);return+c},hideEl:function(a){return a.css({opacity:0})},showEl:function(a){return a.rzAlwaysHide?a:a.css({opacity:1})},setPosition:function(a,b){a.rzsp=b;var c={};return c[this.positionProperty]=b+"px",a.css(c),b},getDimension:function(a){var b=a[0].getBoundingClientRect();return this.options.vertical?a.rzsd=(b.bottom-b.top)*this.options.scale:a.rzsd=(b.right-b.left)*this.options.scale,a.rzsd},setDimension:function(a,b){a.rzsd=b;var c={};return c[this.dimensionProperty]=b+"px",a.css(c),b},valueToOffset:function(a){return this.options.rightToLeft?(this.maxValue-this.sanitizeValue(a))*this.maxPos/this.valueRange||0:(this.sanitizeValue(a)-this.minValue)*this.maxPos/this.valueRange||0},sanitizeValue:function(a){return Math.min(Math.max(a,this.minValue),this.maxValue)},offsetToValue:function(a){return this.options.rightToLeft?(1-a/this.maxPos)*this.valueRange+this.minValue:a/this.maxPos*this.valueRange+this.minValue},getEventXY:function(a){var b=this.options.vertical?"clientY":"clientX";return b in a?a[b]:void 0===a.originalEvent?a.touches[0][b]:a.originalEvent.touches[0][b]},getEventPosition:function(a){var b=this.sliderElem.rzsp,c=0;return c=this.options.vertical?-this.getEventXY(a)+b:this.getEventXY(a)-b,(c-this.handleHalfDim)*this.options.scale},getEventNames:function(a){var b={moveEvent:"",endEvent:""};return a.touches||void 0!==a.originalEvent&&a.originalEvent.touches?(b.moveEvent="touchmove",b.endEvent="touchend"):(b.moveEvent="mousemove",b.endEvent="mouseup"),b},getNearestHandle:function(a){if(!this.range)return this.minH;var b=this.getEventPosition(a),c=Math.abs(b-this.minH.rzsp),d=Math.abs(b-this.maxH.rzsp);return d>c?this.minH:c>d?this.maxH:this.options.rightToLeft?b>this.minH.rzsp?this.minH:this.maxH:b<this.minH.rzsp?this.minH:this.maxH},focusElement:function(a){var b=0;a[b].focus()},bindEvents:function(){var b,c,d;this.options.draggableRange?(b="rzSliderDrag",c=this.onDragStart,d=this.onDragMove):(b="rzSliderModel",c=this.onStart,d=this.onMove),this.options.onlyBindHandles||(this.selBar.on("mousedown",a.bind(this,c,null,b)),this.selBar.on("mousedown",a.bind(this,d,this.selBar))),this.options.draggableRangeOnly?(this.minH.on("mousedown",a.bind(this,c,null,b)),this.maxH.on("mousedown",a.bind(this,c,null,b))):(this.minH.on("mousedown",a.bind(this,this.onStart,this.minH,"rzSliderModel")),this.range&&this.maxH.on("mousedown",a.bind(this,this.onStart,this.maxH,"rzSliderHigh")),this.options.onlyBindHandles||(this.fullBar.on("mousedown",a.bind(this,this.onStart,null,null)),this.fullBar.on("mousedown",a.bind(this,this.onMove,this.fullBar)),this.ticks.on("mousedown",a.bind(this,this.onStart,null,null)),this.ticks.on("mousedown",a.bind(this,this.onMove,this.ticks)))),this.options.onlyBindHandles||(this.selBar.on("touchstart",a.bind(this,c,null,b)),this.selBar.on("touchstart",a.bind(this,d,this.selBar))),this.options.draggableRangeOnly?(this.minH.on("touchstart",a.bind(this,c,null,b)),this.maxH.on("touchstart",a.bind(this,c,null,b))):(this.minH.on("touchstart",a.bind(this,this.onStart,this.minH,"rzSliderModel")),this.range&&this.maxH.on("touchstart",a.bind(this,this.onStart,this.maxH,"rzSliderHigh")),this.options.onlyBindHandles||(this.fullBar.on("touchstart",a.bind(this,this.onStart,null,null)),this.fullBar.on("touchstart",a.bind(this,this.onMove,this.fullBar)),this.ticks.on("touchstart",a.bind(this,this.onStart,null,null)),this.ticks.on("touchstart",a.bind(this,this.onMove,this.ticks)))),this.options.keyboardSupport&&(this.minH.on("focus",a.bind(this,this.onPointerFocus,this.minH,"rzSliderModel")),this.range&&this.maxH.on("focus",a.bind(this,this.onPointerFocus,this.maxH,"rzSliderHigh")))},unbindEvents:function(){this.minH.off(),this.maxH.off(),this.fullBar.off(),this.selBar.off(),this.ticks.off()},onStart:function(b,d,e){var f,g,h=this.getEventNames(e);e.stopPropagation(),e.preventDefault(),this.calcViewDimensions(),b?this.tracking=d:(b=this.getNearestHandle(e),this.tracking=b===this.minH?"rzSliderModel":"rzSliderHigh"),b.addClass("rz-active"),this.options.keyboardSupport&&this.focusElement(b),f=a.bind(this,this.dragging.active?this.onDragMove:this.onMove,b),g=a.bind(this,this.onEnd,f),c.on(h.moveEvent,f),c.one(h.endEvent,g),this.callOnStart()},onMove:function(a,b){var c,d=this.getEventPosition(b),e=this.options.rightToLeft?this.minValue:this.maxValue,f=this.options.rightToLeft?this.maxValue:this.minValue;0>=d?c=f:d>=this.maxPos?c=e:(c=this.offsetToValue(d),c=this.roundStep(c)),this.positionTrackingHandle(c)},onEnd:function(a,b){var d=this.getEventNames(b).moveEvent;this.options.keyboardSupport||(this.minH.removeClass("rz-active"),this.maxH.removeClass("rz-active"),this.tracking=""),this.dragging.active=!1,c.off(d,a),this.scope.$emit("slideEnded"),this.callOnEnd()},onPointerFocus:function(b,c){this.tracking=c,b.one("blur",a.bind(this,this.onPointerBlur,b)),b.on("keydown",a.bind(this,this.onKeyboardEvent)),b.addClass("rz-active")},onPointerBlur:function(a){a.off("keydown"),this.tracking="",a.removeClass("rz-active")},getKeyActions:function(a){var b=a+this.step,c=a-this.step,d=a+this.valueRange/10,e=a-this.valueRange/10,f={UP:b,DOWN:c,LEFT:c,RIGHT:b,PAGEUP:d,PAGEDOWN:e,HOME:this.minValue,END:this.maxValue};return this.options.rightToLeft&&(f.LEFT=b,f.RIGHT=c,this.options.vertical&&(f.UP=c,f.DOWN=b)),f},onKeyboardEvent:function(a){var b=this.scope[this.tracking],c=a.keyCode||a.which,d={38:"UP",40:"DOWN",37:"LEFT",39:"RIGHT",33:"PAGEUP",34:"PAGEDOWN",36:"HOME",35:"END"},e=this.getKeyActions(b),f=d[c],g=e[f];if(null!=g&&""!==this.tracking){a.preventDefault();var h=this.roundStep(this.sanitizeValue(g));if(this.options.draggableRangeOnly){var i,j,k=this.scope.rzSliderHigh-this.scope.rzSliderModel;"rzSliderModel"===this.tracking?(i=h,j=h+k,j>this.maxValue&&(j=this.maxValue,i=j-k)):(j=h,i=h-k,i<this.minValue&&(i=this.minValue,j=i+k)),this.positionTrackingBar(i,j)}else this.positionTrackingHandle(h)}},onDragStart:function(a,b,c){var d=this.getEventPosition(c);this.dragging={active:!0,value:this.offsetToValue(d),difference:this.scope.rzSliderHigh-this.scope.rzSliderModel,lowLimit:this.options.rightToLeft?this.minH.rzsp-d:d-this.minH.rzsp,highLimit:this.options.rightToLeft?d-this.maxH.rzsp:this.maxH.rzsp-d},this.onStart(a,b,c)},getValue:function(a,b,c,d){var e=this.options.rightToLeft,f=null;return f="min"===a?c?d?e?f:this.maxValue-this.dragging.difference:e?this.maxValue-this.dragging.difference:f:e?this.offsetToValue(b+this.dragging.lowLimit):this.offsetToValue(b-this.dragging.lowLimit):c?d?e?this.minValue+this.dragging.difference:this.maxValue:e?this.maxValue:this.minValue+this.dragging.difference:e?this.offsetToValue(b+this.dragging.lowLimit)+this.dragging.difference:this.offsetToValue(b-this.dragging.lowLimit)+this.dragging.difference,this.roundStep(f)},onDragMove:function(a,b){var c,d,e,f,g,h,i,j,k=this.getEventPosition(b);if(this.options.rightToLeft?(e=this.dragging.lowLimit,f=this.dragging.highLimit,i=this.maxH,j=this.minH):(e=this.dragging.highLimit,f=this.dragging.lowLimit,i=this.minH,j=this.maxH),g=f>=k,h=k>=this.maxPos-e,g){if(0===i.rzsp)return;c=this.getValue("min",k,!0,!1),d=this.getValue("max",k,!0,!1)}else if(h){if(j.rzsp===this.maxPos)return;d=this.getValue("max",k,!0,!0),c=this.getValue("min",k,!0,!0)}else c=this.getValue("min",k,!1),d=this.getValue("max",k,!1);this.positionTrackingBar(c,d)},positionTrackingBar:function(a,b){this.scope.rzSliderModel=a,this.scope.rzSliderHigh=b,this.updateHandles("rzSliderModel",this.valueToOffset(a)),this.updateHandles("rzSliderHigh",this.valueToOffset(b)),this.applyModel()},positionTrackingHandle:function(a){var b=!1;this.range&&(a=this.applyMinRange(a),"rzSliderModel"===this.tracking&&a>this.scope.rzSliderHigh?(this.options.noSwitching&&this.scope.rzSliderHigh!==this.minValue?a=this.applyMinRange(this.scope.rzSliderHigh):(this.scope[this.tracking]=this.scope.rzSliderHigh,this.updateHandles(this.tracking,this.maxH.rzsp),this.updateAriaAttributes(),this.tracking="rzSliderHigh",this.minH.removeClass("rz-active"),this.maxH.addClass("rz-active"),this.options.keyboardSupport&&this.focusElement(this.maxH)),b=!0):"rzSliderHigh"===this.tracking&&a<this.scope.rzSliderModel&&(this.options.noSwitching&&this.scope.rzSliderModel!==this.maxValue?a=this.applyMinRange(this.scope.rzSliderModel):(this.scope[this.tracking]=this.scope.rzSliderModel,this.updateHandles(this.tracking,this.minH.rzsp),this.updateAriaAttributes(),this.tracking="rzSliderModel",this.maxH.removeClass("rz-active"),this.minH.addClass("rz-active"),this.options.keyboardSupport&&this.focusElement(this.minH)),b=!0)),this.scope[this.tracking]!==a&&(this.scope[this.tracking]=a,this.updateHandles(this.tracking,this.valueToOffset(a)),this.updateAriaAttributes(),b=!0),b&&this.applyModel()},applyMinRange:function(a){if(0!==this.options.minRange){var b="rzSliderModel"===this.tracking?this.scope.rzSliderHigh:this.scope.rzSliderModel,c=Math.abs(a-b);if(c<this.options.minRange)return"rzSliderModel"===this.tracking?this.scope.rzSliderHigh-this.options.minRange:this.scope.rzSliderModel+this.options.minRange}return a},applyModel:function(){this.internalChange=!0,this.scope.$apply(),this.callOnChange(),this.internalChange=!1}},h}]).directive("rzslider",["RzSlider",function(a){return{restrict:"E",scope:{rzSliderModel:"=?",rzSliderHigh:"=?",rzSliderOptions:"&?",rzSliderTplUrl:"@"},templateUrl:function(a,b){return b.rzSliderTplUrl||"rzSliderTpl.html"},link:function(b,c){b.slider=new a(b,c)}}}]);return b.run(["$templateCache",function(a){a.put("rzSliderTpl.html",'<span class=rz-bar-wrapper><span class=rz-bar></span></span> <span class=rz-bar-wrapper><span class="rz-bar rz-selection" ng-style=barStyle></span></span> <span class="rz-pointer rz-pointer-min" ng-style=minPointerStyle></span> <span class="rz-pointer rz-pointer-max" ng-style=maxPointerStyle></span> <span class="rz-bubble rz-limit"></span> <span class="rz-bubble rz-limit"></span> <span class=rz-bubble></span> <span class=rz-bubble></span> <span class=rz-bubble></span><ul ng-show=showTicks class=rz-ticks><li ng-repeat="t in ticks track by $index" class=tick ng-class="{selected: t.selected}" ng-style=t.style ng-attr-uib-tooltip="{{ t.tooltip }}" ng-attr-tooltip-placement={{t.tooltipPlacement}} ng-attr-tooltip-append-to-body="{{ t.tooltip ? true : undefined}}"><span ng-if="t.value != null" class=tick-value ng-attr-uib-tooltip="{{ t.valueTooltip }}" ng-attr-tooltip-placement={{t.valueTooltipPlacement}}>{{ t.value }}</span></li></ul>')}]),b});
\ No newline at end of file

src/rzslider.js

@@ -63,7 +63,8 @@
       onlyBindHandles: false,
       onStart: null,
       onChange: null,
-      onEnd: null
+      onEnd: null,
+      rightToLeft: false
     };
     var globalOptions = {};
 
@@ -773,7 +774,11 @@
               tick.valueTooltipPlacement = this.options.vertical ? 'right' : 'top';
             }
           }
-          this.scope.ticks.push(tick);
+          if (!this.options.rightToLeft) {
+            this.scope.ticks.push(tick);
+          } else {
+            this.scope.ticks.unshift(tick);
+          }
         }
       },
 
@@ -805,7 +810,9 @@
        */
       updateCeilLab: function() {
         this.translateFn(this.maxValue, this.ceilLab, 'ceil');
-        this.setPosition(this.ceilLab, this.barDimension - this.ceilLab.rzsd);
+        var position = this.options.rightToLeft ? 0 : this.barDimension - this.ceilLab.rzsd;
+        this.setPosition(this.ceilLab, position);
+        //need to explicitly set to 0 for switching between rtl and ltr in demo
         this.getDimension(this.ceilLab);
       },
 
@@ -816,6 +823,8 @@
        */
       updateFloorLab: function() {
         this.translateFn(this.minValue, this.flrLab, 'floor');
+        var position = this.options.rightToLeft ? 0 : this.barDimension - this.flrLab.rzsd;
+        this.setPosition(this.flrLab, position);
         this.getDimension(this.flrLab);
       },
 
@@ -882,6 +891,26 @@
           this.updateCmbLabel();
       },
 
+      /**
+       * Helper function to work out the position for handle labels depending on RTL or not
+       *
+       * @param {string} labelName maxLab or minLab
+       * @param newOffset
+       *
+       * @returns {number}
+       */
+      getHandleLabelPos: function(labelName, newOffset) {
+        var labelRzsd = this[labelName].rzsd,
+          nearHandlePos = newOffset - labelRzsd / 2 + this.handleHalfDim,
+          endOfBarPos = this.barDimension - labelRzsd;
+
+        if (this.options.rightToLeft && labelName === 'minLab' || !this.options.rightToLeft && labelName === 'maxLab') {
+          return Math.min(nearHandlePos, endOfBarPos);
+        } else {
+          return Math.min(Math.max(nearHandlePos, 0), endOfBarPos);
+        }
+      },
+
       /**
        * Update low slider handle position and label
        *
@@ -891,14 +920,7 @@
       updateLowHandle: function(newOffset) {
         this.setPosition(this.minH, newOffset);
         this.translateFn(this.scope.rzSliderModel, this.minLab, 'model');
-        var pos = Math.min(
-          Math.max(
-            newOffset - this.minLab.rzsd / 2 + this.handleHalfDim,
-            0
-          ),
-          this.barDimension - this.minLab.rzsd
-        );
-        this.setPosition(this.minLab, pos);
+        this.setPosition(this.minLab, this.getHandleLabelPos('minLab', newOffset));
 
         if (this.options.getPointerColor) {
           var pointercolor = this.getPointerColor('min');
@@ -919,8 +941,7 @@
       updateHighHandle: function(newOffset) {
         this.setPosition(this.maxH, newOffset);
         this.translateFn(this.scope.rzSliderHigh, this.maxLab, 'high');
-        var pos = Math.min(newOffset - this.maxLab.rzsd / 2 + this.handleHalfDim, this.barDimension - this.maxLab.rzsd);
-        this.setPosition(this.maxLab, pos);
+        this.setPosition(this.maxLab, this.getHandleLabelPos("maxLab", newOffset));
 
         if (this.options.getPointerColor) {
           var pointercolor = this.getPointerColor('max');
@@ -939,9 +960,23 @@
        */
       shFloorCeil: function() {
         var flHidden = false,
-          clHidden = false;
-
-        if (this.minLab.rzsp <= this.flrLab.rzsp + this.flrLab.rzsd + 5) {
+          clHidden = false,
+          isRTL = this.options.rightToLeft,
+          flrLabPos = this.flrLab.rzsp,
+          flrLabDim = this.flrLab.rzsd,
+          minLabPos = this.minLab.rzsp,
+          minLabDim = this.minLab.rzsd,
+          maxLabPos = this.maxLab.rzsp,
+          maxLabDim = this.maxLab.rzsd,
+          ceilLabPos = this.ceilLab.rzsp,
+          halfHandle = this.handleHalfDim,
+          isMinLabAtFloor = isRTL ? minLabPos + minLabDim >= flrLabPos - flrLabDim - 5 : minLabPos <= flrLabPos + flrLabDim + 5,
+          isMinLabAtCeil = isRTL ? minLabPos - minLabDim <= ceilLabPos + halfHandle + 10 : minLabPos + minLabDim >= ceilLabPos - halfHandle - 10,
+          isMaxLabAtFloor = isRTL ? maxLabPos >= flrLabPos - flrLabDim - halfHandle : maxLabPos <= flrLabPos + flrLabDim + halfHandle,
+          isMaxLabAtCeil = isRTL ? maxLabPos - maxLabDim <= ceilLabPos + 10 : maxLabPos + maxLabDim >= ceilLabPos - 10;
+
+
+        if (isMinLabAtFloor) {
           flHidden = true;
           this.hideEl(this.flrLab);
         } else {
@@ -949,7 +984,7 @@
           this.showEl(this.flrLab);
         }
 
-        if (this.minLab.rzsp + this.minLab.rzsd >= this.ceilLab.rzsp - this.handleHalfDim - 10) {
+        if (isMinLabAtCeil) {
           clHidden = true;
           this.hideEl(this.ceilLab);
         } else {
@@ -958,14 +993,14 @@
         }
 
         if (this.range) {
-          if (this.maxLab.rzsp + this.maxLab.rzsd >= this.ceilLab.rzsp - 10) {
+          if (isMaxLabAtCeil) {
             this.hideEl(this.ceilLab);
           } else if (!clHidden) {
             this.showEl(this.ceilLab);
           }
 
           // Hide or show floor label
-          if (this.maxLab.rzsp <= this.flrLab.rzsp + this.flrLab.rzsd + this.handleHalfDim) {
+          if (isMaxLabAtFloor) {
             this.hideEl(this.flrLab);
           } else if (!flHidden) {
             this.showEl(this.flrLab);
@@ -980,16 +1015,20 @@
        */
       updateSelectionBar: function() {
         var position = 0,
-          dimension = 0;
+          dimension = 0,
+          isSelectionBarFromRight = this.options.rightToLeft ? !this.options.showSelectionBarEnd : this.options.showSelectionBarEnd,
+          positionForRange = this.options.rightToLeft ? this.maxH.rzsp + this.handleHalfDim : this.minH.rzsp + this.handleHalfDim;
+
         if (this.range) {
           dimension = Math.abs(this.maxH.rzsp - this.minH.rzsp);
-          position = this.minH.rzsp + this.handleHalfDim;
+          position = positionForRange;
         }
         else {
           if (this.options.showSelectionBarFromValue !== null) {
             var center = this.options.showSelectionBarFromValue,
-              centerPosition = this.valueToOffset(center);
-            if (this.scope.rzSliderModel > center) {
+              centerPosition = this.valueToOffset(center),
+              isModelGreaterThanCenter = this.options.rightToLeft ? this.scope.rzSliderModel <= center : this.scope.rzSliderModel > center;
+            if (isModelGreaterThanCenter) {
               dimension = this.minH.rzsp - centerPosition;
               position = centerPosition + this.handleHalfDim;
             }
@@ -998,7 +1037,7 @@
               position = this.minH.rzsp + this.handleHalfDim;
             }
           }
-          else if (this.options.showSelectionBarEnd) {
+          else if (isSelectionBarFromRight) {
             dimension = Math.abs(this.maxPos - this.minH.rzsp) + this.handleHalfDim;
             position = this.minH.rzsp + this.handleHalfDim;
           } else {
@@ -1031,7 +1070,7 @@
        * correct parameters
        */
       getPointerColor: function(pointerType) {
-        if ( pointerType === 'max' ) {
+        if (pointerType === 'max') {
           return this.options.getPointerColor(this.scope.rzSliderHigh, pointerType);
         }
         return this.options.getPointerColor(this.scope.rzSliderModel, pointerType);
@@ -1043,11 +1082,22 @@
        * @returns {undefined}
        */
       updateCmbLabel: function() {
+        var isLabelOverlap = null;
+        if (this.options.rightToLeft) {
+          isLabelOverlap = this.minLab.rzsp - this.minLab.rzsd - 10 <= this.maxLab.rzsp;
+        } else {
+          isLabelOverlap = this.minLab.rzsp + this.minLab.rzsd + 10 >= this.maxLab.rzsp;
+        }
 
-        if (this.minLab.rzsp + this.minLab.rzsd + 10 >= this.maxLab.rzsp) {
+        if (isLabelOverlap) {
           var lowTr = this.getDisplayValue(this.scope.rzSliderModel, 'model'),
             highTr = this.getDisplayValue(this.scope.rzSliderHigh, 'high'),
-            labelVal = lowTr === highTr ? lowTr : lowTr + ' - ' + highTr;
+            labelVal = '';
+          if (lowTr === highTr) {
+            labelVal = lowTr;
+          } else {
+            labelVal = this.options.rightToLeft ? highTr + ' - ' + lowTr : lowTr + ' - ' + highTr;
+          }
 
           this.translateFn(labelVal, this.cmbLab, 'cmb', false);
           var pos = Math.min(
@@ -1170,6 +1220,9 @@
        * @returns {number}
        */
       valueToOffset: function(val) {
+        if (this.options.rightToLeft) {
+          return (this.maxValue - this.sanitizeValue(val)) * this.maxPos / this.valueRange || 0;
+        }
         return (this.sanitizeValue(val) - this.minValue) * this.maxPos / this.valueRange || 0;
       },
 
@@ -1190,6 +1243,9 @@
        * @returns {number}
        */
       offsetToValue: function(offset) {
+        if (this.options.rightToLeft) {
+          return (1 - (offset / this.maxPos)) * this.valueRange + this.minValue;
+        }
         return (offset / this.maxPos) * this.valueRange + this.minValue;
       },
 
@@ -1269,8 +1325,12 @@
           return this.minH;
         else if (distanceMin > distanceMax)
           return this.maxH;
-        else //if event is at the same distance from min/max then if it's at left of minH, we return minH else maxH
+        else if (!this.options.rightToLeft)
+        //if event is at the same distance from min/max then if it's at left of minH, we return minH else maxH
           return offset < this.minH.rzsp ? this.minH : this.maxH;
+        else
+        //reverse in rtl
+          return offset > this.minH.rzsp ? this.minH : this.maxH;
       },
 
       /**
@@ -1411,12 +1471,14 @@
        */
       onMove: function(pointer, event) {
         var newOffset = this.getEventPosition(event),
-          newValue;
+          newValue,
+          ceilValue = this.options.rightToLeft ? this.minValue : this.maxValue,
+          flrValue = this.options.rightToLeft ? this.maxValue : this.minValue;
 
         if (newOffset <= 0) {
-          newValue = this.minValue;
+          newValue = flrValue;
         } else if (newOffset >= this.maxPos) {
-          newValue = this.maxValue;
+          newValue = ceilValue;
         } else {
           newValue = this.offsetToValue(newOffset);
           newValue = this.roundStep(newValue);
@@ -1459,6 +1521,43 @@
         pointer.removeClass('rz-active');
       },
 
+      /**
+       * Key actions helper function
+       *
+       * @param {number} currentValue value of the slider
+       *
+       * @returns {?Object} action value mappings
+       */
+      getKeyActions: function(currentValue) {
+        var increaseStep = currentValue + this.step,
+          decreaseStep = currentValue - this.step,
+          increasePage = currentValue + this.valueRange / 10,
+          decreasePage = currentValue - this.valueRange / 10;
+
+        //Left to right default actions
+        var actions = {
+          'UP': increaseStep,
+          'DOWN': decreaseStep,
+          'LEFT': decreaseStep,
+          'RIGHT': increaseStep,
+          'PAGEUP': increasePage,
+          'PAGEDOWN': decreasePage,
+          'HOME': this.minValue,
+          'END': this.maxValue
+        };
+        //right to left means swapping right and left arrows
+        if (this.options.rightToLeft) {
+          actions.LEFT = increaseStep;
+          actions.RIGHT = decreaseStep;
+          // right to left and vertical means we also swap up and down
+          if (this.options.vertical) {
+            actions.UP = decreaseStep;
+            actions.DOWN = increaseStep;
+          }
+        }
+        return actions;
+      },
+
       onKeyboardEvent: function(event) {
         var currentValue = this.scope[this.tracking],
           keyCode = event.keyCode || event.which,
@@ -1472,16 +1571,7 @@
             36: 'HOME',
             35: 'END'
           },
-          actions = {
-            UP: currentValue + this.step,
-            DOWN: currentValue - this.step,
-            LEFT: currentValue - this.step,
-            RIGHT: currentValue + this.step,
-            PAGEUP: currentValue + this.valueRange / 10,
-            PAGEDOWN: currentValue - this.valueRange / 10,
-            HOME: this.minValue,
-            END: this.maxValue
-          },
+          actions = this.getKeyActions(currentValue),
           key = keys[keyCode],
           action = actions[key];
         if (action == null || this.tracking === '') return;
@@ -1528,13 +1618,59 @@
           active: true,
           value: this.offsetToValue(offset),
           difference: this.scope.rzSliderHigh - this.scope.rzSliderModel,
-          lowLimit: offset - this.minH.rzsp,
-          highLimit: this.maxH.rzsp - offset
+          lowLimit: this.options.rightToLeft ? this.minH.rzsp - offset : offset - this.minH.rzsp,
+          highLimit: this.options.rightToLeft ? offset - this.maxH.rzsp : this.maxH.rzsp - offset
         };
 
         this.onStart(pointer, ref, event);
       },
 
+      /**
+       * getValue helper function
+       *
+       * gets max or min value depending on whether the newOffset is outOfBounds above or below the bar and rightToLeft
+       *
+       * @param {string} type 'max' || 'min' The value we are calculating
+       * @param {number} newOffset  The new offset
+       * @param {boolean} outOfBounds Is the new offset above or below the max/min?
+       * @param {boolean} isAbove Is the new offset above the bar if out of bounds?
+       *
+       * @returns {number}
+       */
+      getValue: function(type, newOffset, outOfBounds, isAbove) {
+        var isRTL = this.options.rightToLeft,
+          value = null;
+
+        if (type === 'min') {
+          if (outOfBounds) {
+            if (isAbove) {
+              value = isRTL ? value : this.maxValue - this.dragging.difference;
+            } else {
+              value = isRTL ? this.maxValue - this.dragging.difference : value;
+            }
+          } else {
+            value = isRTL ? this.offsetToValue(newOffset + this.dragging.lowLimit) : this.offsetToValue(newOffset - this.dragging.lowLimit)
+          }
+        } else {
+          if (outOfBounds) {
+            if (isAbove) {
+              value = isRTL ? this.minValue + this.dragging.difference : this.maxValue;
+            } else {
+              value = isRTL ? this.maxValue : this.minValue + this.dragging.difference;
+            }
+          } else {
+            if (isRTL) {
+              value = this.offsetToValue(newOffset + this.dragging.lowLimit) + this.dragging.difference
+            } else {
+              value = this.offsetToValue(newOffset - this.dragging.lowLimit) + this.dragging.difference;
+            }
+          }
+        }
+        return this.roundStep(value);
+
+
+      },
+
       /**
        * onDragMove event handler
        *
@@ -1546,27 +1682,39 @@
        */
       onDragMove: function(pointer, event) {
         var newOffset = this.getEventPosition(event),
-          newMinValue, newMaxValue;
+          newMinValue, newMaxValue,
+          ceilLimit, flrLimit,
+          isUnderFlrLimit, isOverCeilLimit,
+          flrH, ceilH;
+
+        if (this.options.rightToLeft) {
+          ceilLimit = this.dragging.lowLimit;
+          flrLimit = this.dragging.highLimit;
+          flrH = this.maxH;
+          ceilH = this.minH;
+        } else {
+          ceilLimit = this.dragging.highLimit;
+          flrLimit = this.dragging.lowLimit;
+          flrH = this.minH;
+          ceilH = this.maxH;
+        }
+        isUnderFlrLimit = newOffset <= flrLimit;
+        isOverCeilLimit = newOffset >= this.maxPos - ceilLimit;
 
-        if (newOffset <= this.dragging.lowLimit) {
-          if (this.minH.rzsp === 0)
+        if (isUnderFlrLimit) {
+          if (flrH.rzsp === 0)
             return;
-          newMinValue = this.minValue;
-          newMaxValue = this.minValue + this.dragging.difference;
-          newMaxValue = this.roundStep(newMaxValue);
-        } else if (newOffset >= this.maxPos - this.dragging.highLimit) {
-          if (this.maxH.rzsp === this.maxPos)
+          newMinValue = this.getValue('min', newOffset, true, false);
+          newMaxValue = this.getValue('max', newOffset, true, false);
+        } else if (isOverCeilLimit) {
+          if (ceilH.rzsp === this.maxPos)
             return;
-          newMaxValue = this.maxValue;
-          newMinValue = this.maxValue - this.dragging.difference;
-          newMinValue = this.roundStep(newMinValue);
+          newMaxValue = this.getValue('max', newOffset, true, true);
+          newMinValue = this.getValue('min', newOffset, true, true);
         } else {
-          newMinValue = this.offsetToValue(newOffset - this.dragging.lowLimit);
-          newMinValue = this.roundStep(newMinValue);
-          newMaxValue = newMinValue + this.dragging.difference;
-          newMaxValue = this.roundStep(newMaxValue);
+          newMinValue = this.getValue('min', newOffset, false);
+          newMaxValue = this.getValue('max', newOffset, false);
         }
-
         this.positionTrackingBar(newMinValue, newMaxValue);
       },
 

tests/specs/helper-functions-test.js

@@ -652,6 +652,60 @@
         expect(helper.slider.onPointerFocus.callCount).to.equal(0);
       });
     });
+
+    describe('RTL tests with same config', function() {
+      beforeEach(function () {
+        var sliderConf = {
+          value: 50,
+          options: {
+            floor: 0,
+            ceil: 100,
+            step: 10,
+            rightToLeft: true
+          }
+
+        };
+        helper.createSlider(sliderConf);
+      });
+
+      it('should have a valid valueToOffset for positive sliders', function() {
+        helper.slider.maxPos = 1000;
+        expect(helper.slider.valueToOffset(0)).to.equal(1000);
+        expect(helper.slider.valueToOffset(50)).to.equal(500);
+        expect(helper.slider.valueToOffset(100)).to.equal(0);
+      });
+
+      it('should have a valid valueToOffset for negative sliders', function() {
+        helper.scope.slider.options.floor = -100;
+        helper.scope.slider.options.ceil = 0;
+        helper.scope.slider.value = -50;
+        helper.scope.$digest();
+
+        helper.slider.maxPos = 1000;
+        expect(helper.slider.valueToOffset(0)).to.equal(0);
+        expect(helper.slider.valueToOffset(-50)).to.equal(500);
+        expect(helper.slider.valueToOffset(-100)).to.equal(1000);
+      });
+
+      it('should have a valid offsetToValue for positive sliders', function() {
+        helper.slider.maxPos = 1000;
+        expect(helper.slider.offsetToValue(0)).to.equal(100);
+        expect(helper.slider.offsetToValue(1000)).to.equal(0);
+        expect(helper.slider.offsetToValue(500)).to.equal(50);
+      });
+
+      it('should have a valid offsetToValue for for negative sliders', function() {
+        helper.scope.slider.options.floor = -100;
+        helper.scope.slider.options.ceil = 0;
+        helper.scope.slider.value = -50;
+        helper.scope.$digest();
+        helper.slider.maxPos = 1000;
+
+        expect(helper.slider.offsetToValue(0)).to.equal(0);
+        expect(helper.slider.offsetToValue(1000)).to.equal(-100);
+        expect(helper.slider.offsetToValue(500)).to.equal(-50);
+      });
+    });
   });
 }());
 

tests/specs/keyboard-controls/draggableRangeOnly-range-slider-test.js

@@ -117,5 +117,123 @@
       expect(helper.scope.slider.max).to.equal(200);
     });
   });
+
+  describe('Right to left Keyboard controls - draggableRangeOnly range slider', function() {
+    var helper,
+        RzSliderOptions,
+        $rootScope,
+        $timeout;
+
+    beforeEach(module('test-helper'));
+
+    beforeEach(inject(function (TestHelper, _RzSliderOptions_, _$rootScope_, _$timeout_) {
+      helper = TestHelper;
+      RzSliderOptions = _RzSliderOptions_;
+      $rootScope = _$rootScope_;
+      $timeout = _$timeout_;
+    }));
+
+    afterEach(function () {
+      helper.clean();
+    });
+
+    beforeEach(function () {
+      var sliderConf = {
+        min: 90,
+        max: 110,
+        options: {
+          floor: 0,
+          ceil: 200,
+          draggableRangeOnly: true,
+          rightToLeft: true
+        }
+      };
+      helper.createRangeSlider(sliderConf);
+    });
+
+    it('should decrement minH/maxH by 1 when RIGHT is pressed on minH', function() {
+      helper.slider.minH.triggerHandler('focus');
+      helper.pressKeydown(helper.slider.minH, 'RIGHT');
+      expect(helper.scope.slider.min).to.equal(89);
+      expect(helper.scope.slider.max).to.equal(109);
+    });
+
+    it('should decrement minH/maxH by 1 when RIGHT is pressed on maxH', function() {
+      helper.slider.maxH.triggerHandler('focus');
+      helper.pressKeydown(helper.slider.maxH, 'RIGHT');
+      expect(helper.scope.slider.min).to.equal(89);
+      expect(helper.scope.slider.max).to.equal(109);
+    });
+
+    it('should increment minH/maxH by 1 when LEFT is pressed on minH', function() {
+      helper.slider.minH.triggerHandler('focus');
+      helper.pressKeydown(helper.slider.minH, 'LEFT');
+      expect(helper.scope.slider.min).to.equal(91);
+      expect(helper.scope.slider.max).to.equal(111);
+    });
+
+    it('should increment minH/maxH by 1 when LEFT is pressed on maxH', function() {
+      helper.slider.maxH.triggerHandler('focus');
+      helper.pressKeydown(helper.slider.maxH, 'LEFT');
+      expect(helper.scope.slider.min).to.equal(91);
+      expect(helper.scope.slider.max).to.equal(111);
+    });
+
+    it('should increment minH/maxH by 10% when PAGEUP is pressed on minH', function() {
+      helper.slider.minH.triggerHandler('focus');
+      helper.pressKeydown(helper.slider.minH, 'PAGEUP');
+      expect(helper.scope.slider.min).to.equal(110);
+      expect(helper.scope.slider.max).to.equal(130);
+    });
+
+    it('should increment minH/maxH by 10% when PAGEUP is pressed on maxH', function() {
+      helper.slider.maxH.triggerHandler('focus');
+      helper.pressKeydown(helper.slider.maxH, 'PAGEUP');
+      expect(helper.scope.slider.min).to.equal(110);
+      expect(helper.scope.slider.max).to.equal(130);
+    });
+
+    it('should decrement minH/maxH by 10% when PAGEDOWN is pressed on minH', function() {
+      helper.slider.minH.triggerHandler('focus');
+      helper.pressKeydown(helper.slider.minH, 'PAGEDOWN');
+      expect(helper.scope.slider.min).to.equal(70);
+      expect(helper.scope.slider.max).to.equal(90);
+    });
+
+    it('should decrement minH/maxH by 10% when PAGEDOWN is pressed on maxH', function() {
+      helper.slider.maxH.triggerHandler('focus');
+      helper.pressKeydown(helper.slider.maxH, 'PAGEDOWN');
+      expect(helper.scope.slider.min).to.equal(70);
+      expect(helper.scope.slider.max).to.equal(90);
+    });
+
+    it('should set minH to min when HOME is pressed on minH', function() {
+      helper.slider.minH.triggerHandler('focus');
+      helper.pressKeydown(helper.slider.minH, 'HOME');
+      expect(helper.scope.slider.min).to.equal(0);
+      expect(helper.scope.slider.max).to.equal(20);
+    });
+
+    it('should set minH to min when HOME is pressed on maxH', function() {
+      helper.slider.maxH.triggerHandler('focus');
+      helper.pressKeydown(helper.slider.maxH, 'HOME');
+      expect(helper.scope.slider.min).to.equal(0);
+      expect(helper.scope.slider.max).to.equal(20);
+    });
+
+    it('should set minH to min when END is pressed on minH', function() {
+      helper.slider.minH.triggerHandler('focus');
+      helper.pressKeydown(helper.slider.minH, 'END');
+      expect(helper.scope.slider.min).to.equal(180);
+      expect(helper.scope.slider.max).to.equal(200);
+    });
+
+    it('should set minH to min when END is pressed on maxH', function() {
+      helper.slider.maxH.triggerHandler('focus');
+      helper.pressKeydown(helper.slider.maxH, 'END');
+      expect(helper.scope.slider.min).to.equal(180);
+      expect(helper.scope.slider.max).to.equal(200);
+    });
+  });
 }());
 

tests/specs/keyboard-controls/range-slider-test.js

@@ -149,5 +149,143 @@
       expect(helper.scope.slider.max).to.equal(101);
     });
   });
+
+  describe('Right to left Keyboard controls - range slider', function() {
+    var helper,
+        RzSliderOptions,
+        $rootScope,
+        $timeout;
+
+    beforeEach(module('test-helper'));
+
+    beforeEach(inject(function (TestHelper, _RzSliderOptions_, _$rootScope_, _$timeout_) {
+      helper = TestHelper;
+      RzSliderOptions = _RzSliderOptions_;
+      $rootScope = _$rootScope_;
+      $timeout = _$timeout_;
+    }));
+
+    afterEach(function () {
+      helper.clean();
+    });
+
+    beforeEach(function () {
+      var sliderConf = {
+        min: 50,
+        max: 100,
+        options: {
+          floor: 0,
+          ceil: 200,
+          rightToLeft: true
+        }
+      };
+      helper.createRangeSlider(sliderConf);
+    });
+
+    it('should decrement minH by 1 when RIGHT is pressed', function() {
+      helper.slider.minH.triggerHandler('focus');
+      helper.pressKeydown(helper.slider.minH, 'RIGHT');
+      expect(helper.scope.slider.min).to.equal(49);
+    });
+
+    it('should decrement maxH by 1 when RIGHT is pressed', function() {
+      helper.slider.maxH.triggerHandler('focus');
+      helper.pressKeydown(helper.slider.maxH, 'RIGHT');
+      expect(helper.scope.slider.max).to.equal(99);
+    });
+
+    it('should increment minH by 1 when LEFT is pressed', function() {
+      helper.slider.minH.triggerHandler('focus');
+      helper.pressKeydown(helper.slider.minH, 'LEFT');
+      expect(helper.scope.slider.min).to.equal(51);
+    });
+
+    it('should increment maxH by 1 when LEFT is pressed', function() {
+      helper.slider.maxH.triggerHandler('focus');
+      helper.pressKeydown(helper.slider.maxH, 'LEFT');
+      expect(helper.scope.slider.max).to.equal(101);
+    });
+
+    it('should increment minH by 10% when PAGEUP is pressed', function() {
+      helper.slider.minH.triggerHandler('focus');
+      helper.pressKeydown(helper.slider.minH, 'PAGEUP');
+      expect(helper.scope.slider.min).to.equal(70);
+    });
+
+    it('should increment maxH by 10% when PAGEUP is pressed', function() {
+      helper.slider.maxH.triggerHandler('focus');
+      helper.pressKeydown(helper.slider.maxH, 'PAGEUP');
+      expect(helper.scope.slider.max).to.equal(120);
+    });
+
+    it('should decrement minH by 10% when PAGEDOWN is pressed', function() {
+      helper.slider.minH.triggerHandler('focus');
+      helper.pressKeydown(helper.slider.minH, 'PAGEDOWN');
+      expect(helper.scope.slider.min).to.equal(30);
+    });
+
+    it('should decrement maxH by 10% when PAGEDOWN is pressed', function() {
+      helper.slider.maxH.triggerHandler('focus');
+      helper.pressKeydown(helper.slider.maxH, 'PAGEDOWN');
+      expect(helper.scope.slider.max).to.equal(80);
+    });
+
+    it('should set minH to min when HOME is pressed on minH', function() {
+      helper.slider.minH.triggerHandler('focus');
+      helper.pressKeydown(helper.slider.minH, 'HOME');
+      expect(helper.scope.slider.min).to.equal(0);
+    });
+
+    it('should set minH value to previous min and switch min/max when HOME is pressed on maxH', function() {
+      helper.slider.maxH.triggerHandler('focus');
+      helper.pressKeydown(helper.slider.maxH, 'HOME');
+      expect(helper.scope.slider.min).to.equal(0);
+      expect(helper.scope.slider.max).to.equal(50);
+    });
+
+    it('should set minH value to previous max and switch min/max when END is pressed on minH', function() {
+      helper.slider.minH.triggerHandler('focus');
+      helper.pressKeydown(helper.slider.minH, 'END');
+      expect(helper.scope.slider.min).to.equal(100);
+      expect(helper.scope.slider.max).to.equal(200);
+    });
+
+    it('should set maxH value to max when END is pressed on maxH', function() {
+      helper.slider.maxH.triggerHandler('focus');
+      helper.pressKeydown(helper.slider.maxH, 'END');
+      expect(helper.scope.slider.max).to.equal(200);
+    });
+
+    it('should do nothing when SPACE is pressed on minH', function() {
+      helper.slider.minH.triggerHandler('focus');
+      helper.pressKeydown(helper.slider.minH, 'SPACE');
+      expect(helper.scope.slider.min).to.equal(50);
+    });
+
+    it('should do nothing when SPACE is pressed on maxH', function() {
+      helper.slider.maxH.triggerHandler('focus');
+      helper.pressKeydown(helper.slider.maxH, 'SPACE');
+      expect(helper.scope.slider.max).to.equal(100);
+    });
+
+    it('should not modify minH when keypress but not focused', function() {
+      helper.slider.minH.triggerHandler('focus');
+      helper.pressKeydown(helper.slider.minH, 'RIGHT');
+      expect(helper.scope.slider.min).to.equal(49);
+      helper.slider.minH.triggerHandler('blur');
+      helper.pressKeydown(helper.slider.minH, 'RIGHT');
+      expect(helper.scope.slider.min).to.equal(49);
+    });
+
+    it('should not modify maxH when keypress but not focused', function() {
+      helper.slider.maxH.triggerHandler('focus');
+      helper.pressKeydown(helper.slider.maxH, 'RIGHT');
+      expect(helper.scope.slider.max).to.equal(99);
+      helper.slider.maxH.triggerHandler('blur');
+      helper.pressKeydown(helper.slider.maxH, 'RIGHT');
+      expect(helper.scope.slider.max).to.equal(99);
+    });
+
+  });
 }());
 

tests/specs/keyboard-controls/single-slider-test.js

@@ -107,5 +107,113 @@
       expect(helper.scope.slider.value).to.equal(101);
     });
   });
+
+  describe('Right to left Keyboard controls - single slider', function() {
+    var helper,
+        RzSliderOptions,
+        $rootScope,
+        $timeout;
+
+    beforeEach(module('test-helper'));
+
+    beforeEach(inject(function (TestHelper, _RzSliderOptions_, _$rootScope_, _$timeout_) {
+      helper = TestHelper;
+      RzSliderOptions = _RzSliderOptions_;
+      $rootScope = _$rootScope_;
+      $timeout = _$timeout_;
+    }));
+
+    afterEach(function () {
+      helper.clean();
+    });
+
+    beforeEach(function () {
+      var sliderConf = {
+        value: 100,
+        options: {
+          floor: 0,
+          ceil: 200,
+          rightToLeft: true
+        }
+      };
+      helper.createSlider(sliderConf);
+    });
+
+    it('should toggle active style when handle focused/blured', function() {
+      helper.slider.minH.triggerHandler('focus');
+      expect(helper.slider.minH.hasClass('rz-active')).to.be.true;
+      helper.slider.minH.triggerHandler('blur');
+      expect(helper.slider.minH.hasClass('rz-active')).to.be.false;
+    });
+
+    it('should decrement by 1 when RIGHT is pressed', function() {
+      helper.slider.minH.triggerHandler('focus');
+      helper.pressKeydown(helper.slider.minH, 'RIGHT');
+      expect(helper.scope.slider.value).to.equal(99);
+    });
+
+    it('should decrement by 1 when RIGHT is pressed with oldAPI', function() {
+      helper.slider.minH.triggerHandler('focus');
+      helper.pressKeydown(helper.slider.minH, 'RIGHT', true);
+      expect(helper.scope.slider.value).to.equal(99);
+    });
+
+    it('should increment by 1 when LEFT is pressed', function() {
+      helper.slider.minH.triggerHandler('focus');
+      helper.pressKeydown(helper.slider.minH, 'LEFT');
+      expect(helper.scope.slider.value).to.equal(101);
+    });
+
+    it('should increment by 1 when UP is pressed', function() {
+      helper.slider.minH.triggerHandler('focus');
+      helper.pressKeydown(helper.slider.minH, 'UP');
+      expect(helper.scope.slider.value).to.equal(101);
+    });
+
+    it('should decrement by 1 when DOWN is pressed', function() {
+      helper.slider.minH.triggerHandler('focus');
+      helper.pressKeydown(helper.slider.minH, 'DOWN');
+      expect(helper.scope.slider.value).to.equal(99);
+    });
+
+    it('should increment by 10% when PAGEUP is pressed', function() {
+      helper.slider.minH.triggerHandler('focus');
+      helper.pressKeydown(helper.slider.minH, 'PAGEUP');
+      expect(helper.scope.slider.value).to.equal(120);
+    });
+
+    it('should decrement by 10% when PAGEDOWN is pressed', function() {
+      helper.slider.minH.triggerHandler('focus');
+      helper.pressKeydown(helper.slider.minH, 'PAGEDOWN');
+      expect(helper.scope.slider.value).to.equal(80);
+    });
+
+    it('should set value to min when HOME is pressed', function() {
+      helper.slider.minH.triggerHandler('focus');
+      helper.pressKeydown(helper.slider.minH, 'HOME');
+      expect(helper.scope.slider.value).to.equal(0);
+    });
+
+    it('should  set value to max when END is pressed', function() {
+      helper.slider.minH.triggerHandler('focus');
+      helper.pressKeydown(helper.slider.minH, 'END');
+      expect(helper.scope.slider.value).to.equal(200);
+    });
+
+    it('should do nothing when SPACE is pressed', function() {
+      helper.slider.minH.triggerHandler('focus');
+      helper.pressKeydown(helper.slider.minH, 'SPACE');
+      expect(helper.scope.slider.value).to.equal(100);
+    });
+
+    it('should not modify when keypress but not focused', function() {
+      helper.slider.minH.triggerHandler('focus');
+      helper.pressKeydown(helper.slider.minH, 'RIGHT');
+      expect(helper.scope.slider.value).to.equal(99);
+      helper.slider.minH.triggerHandler('blur');
+      helper.pressKeydown(helper.slider.minH, 'RIGHT');
+      expect(helper.scope.slider.value).to.equal(99);
+    });
+  });
 }());
 

tests/specs/keyboard-controls/specific-test.js

@@ -126,7 +126,139 @@
       helper.pressKeydown(helper.slider.maxH, 'RIGHT');
       expect(helper.scope.slider.max).to.equal(56);
     });
+  });
+
+  describe('Right to left Keyboard controls - specific tests', function() {
+    var helper,
+        RzSliderOptions,
+        $rootScope,
+        $timeout;
+
+    beforeEach(module('test-helper'));
+
+    beforeEach(inject(function (TestHelper, _RzSliderOptions_, _$rootScope_, _$timeout_) {
+      helper = TestHelper;
+      RzSliderOptions = _RzSliderOptions_;
+      $rootScope = _$rootScope_;
+      $timeout = _$timeout_;
+    }));
+
+    afterEach(function () {
+      helper.clean();
+    });
+
+    it('should not go below floor', function() {
+      var sliderConf = {
+        value: 10,
+        options: {
+          floor: 0,
+          ceil: 1000,
+          step: 10,
+          rightToLeft: true
+        }
+      };
+      helper.createSlider(sliderConf);
+      helper.slider.minH.triggerHandler('focus');
+      helper.pressKeydown(helper.slider.minH, 'PAGEDOWN');
+      expect(helper.scope.slider.value).to.equal(0);
+    });
+
+    it('should not go above ceil', function() {
+      var sliderConf = {
+        value: 990,
+        options: {
+          floor: 0,
+          ceil: 1000,
+          step: 10,
+          rightToLeft: true
+        }
+      };
+      helper.createSlider(sliderConf);
+      helper.slider.minH.triggerHandler('focus');
+      helper.pressKeydown(helper.slider.minH, 'PAGEUP');
+      expect(helper.scope.slider.value).to.equal(1000);
+    });
+
+    it('should not be modified by keyboard if disabled=true', function() {
+      var sliderConf = {
+        value: 10,
+        options: {
+          floor: 0,
+          ceil: 100,
+          disabled: true,
+          rightToLeft: true
+        }
+      };
+      helper.createSlider(sliderConf);
+      helper.slider.minH.triggerHandler('focus');
+      helper.pressKeydown(helper.slider.minH, 'LEFT');
+      expect(helper.scope.slider.value).to.equal(10);
+    });
+
+    it('should not be modified by keyboard if readOnly=true', function() {
+      var sliderConf = {
+        value: 10,
+        options: {
+          floor: 0,
+          ceil: 100,
+          readOnly: true,
+          rightToLeft: true
+        }
+      };
+      helper.createSlider(sliderConf);
+      helper.slider.minH.triggerHandler('focus');
+      helper.pressKeydown(helper.slider.minH, 'LEFT');
+      expect(helper.scope.slider.value).to.equal(10);
+    });
 
+    it('should not be modified by keyboard if new range is below minRange', function() {
+      var sliderConf = {
+        min: 45,
+        max: 55,
+        options: {
+          floor: 0,
+          ceil: 100,
+          step: 1,
+          minRange: 10,
+          rightToLeft: true
+        }
+      };
+      helper.createRangeSlider(sliderConf);
+      //try to move minH left ( increase in rtl )
+      helper.slider.minH.triggerHandler('focus');
+      helper.pressKeydown(helper.slider.minH, 'LEFT');
+      expect(helper.scope.slider.min).to.equal(45);
+
+      //try to move maxH right (decrease in rtl )
+      helper.slider.maxH.triggerHandler('focus');
+      helper.pressKeydown(helper.slider.maxH, 'RIGHT');
+      expect(helper.scope.slider.max).to.equal(55);
+    });
+
+    it('should be modified by keyboard if new range is above minRange', function() {
+      var sliderConf = {
+        min: 45,
+        max: 55,
+        options: {
+          floor: 0,
+          ceil: 100,
+          step: 1,
+          minRange: 10,
+          rightToLeft: true
+        }
+      };
+      helper.createRangeSlider(sliderConf);
+
+      //try to move minH RIGHT
+      helper.slider.minH.triggerHandler('focus');
+      helper.pressKeydown(helper.slider.minH, 'RIGHT');
+      expect(helper.scope.slider.min).to.equal(44);
+
+      //try to move maxH LEFT
+      helper.slider.maxH.triggerHandler('focus');
+      helper.pressKeydown(helper.slider.maxH, 'LEFT');
+      expect(helper.scope.slider.max).to.equal(56);
+    });
   });
 }());
 

tests/specs/keyboard-controls/vertical-slider-test.js

@@ -56,5 +56,64 @@
       expect(helper.scope.slider.value).to.equal(99);
     });
   });
+
+  describe('Right to left Keyboard controls - vertical slider', function() {
+    var helper,
+        RzSliderOptions,
+        $rootScope,
+        $timeout;
+
+    beforeEach(module('test-helper'));
+
+    beforeEach(inject(function(TestHelper, _RzSliderOptions_, _$rootScope_, _$timeout_) {
+      helper = TestHelper;
+      RzSliderOptions = _RzSliderOptions_;
+      $rootScope = _$rootScope_;
+      $timeout = _$timeout_;
+    }));
+
+    afterEach(function() {
+      helper.clean();
+    });
+
+    beforeEach(function() {
+      var sliderConf = {
+        value: 100,
+        options: {
+          floor: 0,
+          ceil: 200,
+          vertical: true,
+          rightToLeft: true
+        }
+      };
+      helper.createSlider(sliderConf);
+    });
+
+    it('should decrement by 1 when RIGHT is pressed', function() {
+      helper.slider.minH.triggerHandler('focus');
+      helper.pressKeydown(helper.slider.minH, 'RIGHT');
+      expect(helper.scope.slider.value).to.equal(99);
+    });
+
+    it('should decrement by 1 when UP is pressed', function() {
+      //while not strictly left to right this does allow also reversing vertical bars
+      helper.slider.minH.triggerHandler('focus');
+      helper.pressKeydown(helper.slider.minH, 'UP');
+      expect(helper.scope.slider.value).to.equal(99);
+    });
+
+    it('should increment by 1 when DOWN is pressed', function() {
+      //while not strictly left to right this does allow also reversing vertical bars
+      helper.slider.minH.triggerHandler('focus');
+      helper.pressKeydown(helper.slider.minH, 'DOWN');
+      expect(helper.scope.slider.value).to.equal(101);
+    });
+
+    it('should increment by 1 when LEFT is pressed', function() {
+      helper.slider.minH.triggerHandler('focus');
+      helper.pressKeydown(helper.slider.minH, 'LEFT');
+      expect(helper.scope.slider.value).to.equal(101);
+    });
+  });
 }());
 

tests/specs/mouse-controls/draggable-range-slider-horizontal-test.js

@@ -201,5 +201,207 @@
       expect(helper.slider.maxH.css('left')).to.equal(maxOffset + 'px');
     });
   });
+
+  describe('Right to left Mouse controls - draggableRange Horizontal', function() {
+    var helper,
+        RzSliderOptions,
+        $rootScope,
+        $timeout;
+
+    beforeEach(module('test-helper'));
+
+    beforeEach(inject(function(TestHelper, _RzSliderOptions_, _$rootScope_, _$timeout_) {
+      helper = TestHelper;
+      RzSliderOptions = _RzSliderOptions_;
+      $rootScope = _$rootScope_;
+      $timeout = _$timeout_;
+    }));
+
+    afterEach(function() {
+      helper.clean();
+    });
+
+    beforeEach(function() {
+      var sliderConf = {
+        min: 40,
+        max: 60,
+        options: {
+          floor: 0,
+          ceil: 100,
+          draggableRange: true,
+          rightToLeft: true
+        }
+      };
+      helper.createRangeSlider(sliderConf);
+    });
+    afterEach(function() {
+      // to clean document listener
+      helper.fireMouseup();
+    });
+
+    it('should handle click and drag on minH correctly when mouse is on the middle', function() {
+      sinon.spy(helper.slider, 'positionTrackingHandle');
+      sinon.spy(helper.slider, 'callOnChange');
+      var event = helper.fireMousedown(helper.slider.minH, 0);
+      var expectedValue = 50,
+          offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
+      helper.fireMousemove(offset);
+      expect(helper.scope.slider.min).to.equal(expectedValue);
+      helper.slider.positionTrackingHandle.called.should.be.true;
+      helper.slider.callOnChange.called.should.be.true;
+    });
+
+    it('should handle click and drag on maxH correctly when mouse is on the middle', function() {
+      sinon.spy(helper.slider, 'positionTrackingHandle');
+      sinon.spy(helper.slider, 'callOnChange');
+      var event = helper.fireMousedown(helper.slider.maxH, 0);
+      var expectedValue = 50,
+          offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
+      helper.fireMousemove(offset);
+      expect(helper.scope.slider.max).to.equal(expectedValue);
+      helper.slider.positionTrackingHandle.called.should.be.true;
+      helper.slider.callOnChange.called.should.be.true;
+    });
+
+    it('should handle click and drag on minH and switch min/max if needed', function() {
+      var event = helper.fireMousedown(helper.slider.minH, 0);
+      var expectedValue = 80,
+          offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
+      helper.fireMousemove(offset);
+
+      expect(helper.scope.slider.min).to.equal(60);
+      expect(helper.scope.slider.max).to.equal(80);
+    });
+
+    it('should handle click and drag on maxH and switch min/max if needed', function() {
+      var event = helper.fireMousedown(helper.slider.maxH, 0);
+      var expectedValue = 20,
+          offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
+      helper.fireMousemove(offset);
+
+      expect(helper.scope.slider.min).to.equal(20);
+      expect(helper.scope.slider.max).to.equal(40);
+    });
+
+    it('should handle click on fullbar and move minH when click pos is nearer to minH', function() {
+      sinon.spy(helper.slider, 'positionTrackingHandle');
+      sinon.spy(helper.slider, 'callOnStart');
+      sinon.spy(helper.slider, 'callOnChange');
+      sinon.spy(helper.slider, 'focusElement');
+
+      var expectedValue = 10,
+          offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
+
+      var event = helper.fireMousedown(helper.slider.fullBar, offset);
+
+      expect(helper.scope.slider.min).to.equal(expectedValue);
+      expect(helper.slider.tracking).to.equal('rzSliderModel');
+      helper.slider.focusElement.calledWith(helper.slider.minH).should.be.true;
+      helper.slider.positionTrackingHandle.called.should.be.true;
+      helper.slider.callOnStart.called.should.be.true;
+      helper.slider.callOnChange.called.should.be.true;
+    });
+
+    it('should handle click on fullbar and move maxH when click pos is nearer to maxH', function() {
+      sinon.spy(helper.slider, 'positionTrackingHandle');
+      sinon.spy(helper.slider, 'callOnStart');
+      sinon.spy(helper.slider, 'callOnChange');
+      sinon.spy(helper.slider, 'focusElement');
+
+      var expectedValue = 90,
+          offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
+
+      var event = helper.fireMousedown(helper.slider.fullBar, offset);
+
+      expect(helper.scope.slider.max).to.equal(expectedValue);
+      expect(helper.slider.tracking).to.equal('rzSliderHigh');
+      helper.slider.focusElement.calledWith(helper.slider.maxH).should.be.true;
+      helper.slider.positionTrackingHandle.called.should.be.true;
+      helper.slider.callOnStart.called.should.be.true;
+      helper.slider.callOnChange.called.should.be.true;
+    });
+
+    it('should handle click on selbar and move whole range when moved within slider range', function() {
+      sinon.spy(helper.slider, 'positionTrackingBar');
+      sinon.spy(helper.slider, 'callOnStart');
+      sinon.spy(helper.slider, 'callOnChange');
+      sinon.spy(helper.slider, 'focusElement');
+
+      helper.fireMousedown(helper.slider.selBar, 0);
+
+      var moveValue = 10,
+          offset = helper.slider.maxPos - helper.slider.valueToOffset(moveValue);
+      helper.fireMousemove(offset);
+
+      expect(helper.scope.slider.min).to.equal(30);
+      expect(helper.scope.slider.max).to.equal(50);
+      expect(helper.slider.tracking).to.equal('rzSliderHigh');
+      helper.slider.focusElement.calledWith(helper.slider.maxH).should.be.true;
+      helper.slider.positionTrackingBar.called.should.be.true;
+      helper.slider.callOnStart.called.should.be.true;
+      helper.slider.callOnChange.called.should.be.true;
+    });
+
+    it('should handle click on selbar and move move range when near 0 and moved right', function() {
+      helper.scope.slider.min = 10;
+      helper.scope.$digest();
+
+      helper.fireMousedown(helper.slider.selBar, 0);
+      helper.fireMousemove(1000);
+
+      expect(helper.scope.slider.min).to.equal(0);
+      expect(helper.scope.slider.max).to.equal(50);
+      expect(helper.slider.tracking).to.equal('rzSliderHigh');
+    });
+
+    it('should handle click on selbar and don\'t move range when already at 0 and moved right', function() {
+      helper.scope.slider.min = 0;
+      helper.scope.$digest();
+
+      helper.fireMousedown(helper.slider.selBar, 0);
+      helper.fireMousemove(100);
+
+      expect(helper.scope.slider.min).to.equal(0);
+      expect(helper.scope.slider.max).to.equal(60);
+      expect(helper.slider.tracking).to.equal('rzSliderHigh');
+    });
+
+    it('should handle click on selbar and move range when near max and moved left', function() {
+      helper.scope.slider.max = 90;
+      helper.scope.$digest();
+
+      helper.fireMousedown(helper.slider.selBar, 0);
+      helper.fireMousemove(-1000);
+
+      expect(helper.scope.slider.min).to.equal(50);
+      expect(helper.scope.slider.max).to.equal(100);
+      expect(helper.slider.tracking).to.equal('rzSliderHigh');
+    });
+
+    it('should handle click on selbar and don\'t move range when already at max and moved left', function() {
+      helper.scope.slider.max = 100;
+      helper.scope.$digest();
+
+      helper.fireMousedown(helper.slider.selBar, 0);
+      helper.fireMousemove(-1000);
+
+      expect(helper.scope.slider.min).to.equal(40);
+      expect(helper.scope.slider.max).to.equal(100);
+      expect(helper.slider.tracking).to.equal('rzSliderHigh');
+    });
+
+    it('should a working positionTrackingBar', function() {
+      var newMin = 50,
+          newMax = 90,
+          minOffset = helper.slider.valueToOffset(newMin),
+          maxOffset = helper.slider.valueToOffset(newMax);
+      helper.slider.positionTrackingBar(newMin, newMax, minOffset, maxOffset);
+
+      expect(helper.scope.slider.min).to.equal(50);
+      expect(helper.scope.slider.max).to.equal(90);
+      expect(helper.slider.minH.css('left')).to.equal(minOffset + 'px');
+      expect(helper.slider.maxH.css('left')).to.equal(maxOffset + 'px');
+    });
+  });
 }());
 

tests/specs/mouse-controls/draggableOnly-range-slider-horizontal-test.js

@@ -148,5 +148,154 @@
       expect(helper.slider.tracking).to.equal('rzSliderModel');
     });
   });
+
+  describe('Right to left Mouse controls - draggableRangeOnly Horizontal', function() {
+    var helper,
+        RzSliderOptions,
+        $rootScope,
+        $timeout;
+
+    beforeEach(module('test-helper'));
+
+    beforeEach(inject(function(TestHelper, _RzSliderOptions_, _$rootScope_, _$timeout_) {
+      helper = TestHelper;
+      RzSliderOptions = _RzSliderOptions_;
+      $rootScope = _$rootScope_;
+      $timeout = _$timeout_;
+    }));
+
+    afterEach(function() {
+      helper.clean();
+    });
+
+    beforeEach(function() {
+      var sliderConf = {
+        min: 40,
+        max: 60,
+        options: {
+          floor: 0,
+          ceil: 100,
+          draggableRangeOnly: true,
+          leftToRight: true
+        }
+      };
+      helper.createRangeSlider(sliderConf);
+    });
+    afterEach(function() {
+      // to clean document listener
+      helper.fireMouseup();
+    });
+
+    it('should handle click and drag on minH correctly', function() {
+      sinon.spy(helper.slider, 'positionTrackingBar');
+      sinon.spy(helper.slider, 'callOnChange');
+
+      var event = helper.fireMousedown(helper.slider.minH, 0);
+      var moveValue = 10,
+          offset = helper.slider.valueToOffset(moveValue);
+      helper.fireMousemove(offset);
+
+      expect(helper.scope.slider.min).to.equal(50);
+      expect(helper.scope.slider.max).to.equal(70);
+      helper.slider.positionTrackingBar.called.should.be.true;
+      helper.slider.callOnChange.called.should.be.true;
+    });
+
+    it('should handle click and drag on maxH correctly', function() {
+      sinon.spy(helper.slider, 'positionTrackingBar');
+      sinon.spy(helper.slider, 'callOnChange');
+      var event = helper.fireMousedown(helper.slider.maxH, 0);
+      var moveValue = 10,
+          offset = helper.slider.valueToOffset(moveValue);
+      helper.fireMousemove(offset);
+      expect(helper.scope.slider.min).to.equal(50);
+      expect(helper.scope.slider.max).to.equal(70);
+      helper.slider.positionTrackingBar.called.should.be.true;
+      helper.slider.callOnChange.called.should.be.true;
+    });
+
+    it('should not handle click on fullbar', function() {
+      sinon.spy(helper.slider, 'callOnStart');
+
+      var moveValue = 10,
+          offset = helper.slider.valueToOffset(moveValue);
+
+      var event = helper.fireMousedown(helper.slider.fullBar, offset);
+
+      expect(helper.scope.slider.min).to.equal(40);
+      expect(helper.scope.slider.max).to.equal(60);
+      expect(helper.slider.tracking).to.equal('');
+      helper.slider.callOnStart.called.should.be.false;
+    });
+
+    it('should handle click on selbar and move whole range when moved within slider range', function() {
+      sinon.spy(helper.slider, 'positionTrackingBar');
+      sinon.spy(helper.slider, 'callOnStart');
+      sinon.spy(helper.slider, 'callOnChange');
+      sinon.spy(helper.slider, 'focusElement');
+
+      helper.fireMousedown(helper.slider.selBar, 0);
+
+      var moveValue = 10,
+          offset = helper.slider.valueToOffset(moveValue);
+      helper.fireMousemove(offset);
+
+      expect(helper.scope.slider.min).to.equal(50);
+      expect(helper.scope.slider.max).to.equal(70);
+      expect(helper.slider.tracking).to.equal('rzSliderModel');
+      helper.slider.focusElement.calledWith(helper.slider.minH).should.be.true;
+      helper.slider.positionTrackingBar.called.should.be.true;
+      helper.slider.callOnStart.called.should.be.true;
+      helper.slider.callOnChange.called.should.be.true;
+    });
+
+    it('should handle click on selbar and move move range when near 0 and moved left', function() {
+      helper.scope.slider.min = 10;
+      helper.scope.$digest();
+
+      helper.fireMousedown(helper.slider.selBar, 0);
+      helper.fireMousemove(-1000);
+
+      expect(helper.scope.slider.min).to.equal(0);
+      expect(helper.scope.slider.max).to.equal(50);
+      expect(helper.slider.tracking).to.equal('rzSliderModel');
+    });
+
+    it('should handle click on selbar and don\'t move range when already at 0 and moved left', function() {
+      helper.scope.slider.min = 0;
+      helper.scope.$digest();
+
+      helper.fireMousedown(helper.slider.selBar, 0);
+      helper.fireMousemove(-100);
+
+      expect(helper.scope.slider.min).to.equal(0);
+      expect(helper.scope.slider.max).to.equal(60);
+      expect(helper.slider.tracking).to.equal('rzSliderModel');
+    });
+
+    it('should handle click on selbar and move move range when near max and moved right', function() {
+      helper.scope.slider.max = 90;
+      helper.scope.$digest();
+
+      helper.fireMousedown(helper.slider.selBar, 0);
+      helper.fireMousemove(helper.slider.maxPos);
+
+      expect(helper.scope.slider.min).to.equal(50);
+      expect(helper.scope.slider.max).to.equal(100);
+      expect(helper.slider.tracking).to.equal('rzSliderModel');
+    });
+
+    it('should handle click on selbar and don\'t move range when already at max and moved right', function() {
+      helper.scope.slider.max = 100;
+      helper.scope.$digest();
+
+      helper.fireMousedown(helper.slider.selBar, 0);
+      helper.fireMousemove(helper.slider.maxPos);
+
+      expect(helper.scope.slider.min).to.equal(40);
+      expect(helper.scope.slider.max).to.equal(100);
+      expect(helper.slider.tracking).to.equal('rzSliderModel');
+    });
+  });
 }());
 

tests/specs/mouse-controls/minRange-noSwitching-range-slider-horizontal-test.js

@@ -88,5 +88,95 @@
       expect(helper.scope.slider.max).to.equal(55);
     });
   });
+
+  describe('Right to left Mouse controls - minRange and noSwitching Range Horizontal', function() {
+    var helper,
+      RzSliderOptions,
+      $rootScope,
+      $timeout;
+
+    beforeEach(module('test-helper'));
+
+    beforeEach(inject(function(TestHelper, _RzSliderOptions_, _$rootScope_, _$timeout_) {
+      helper = TestHelper;
+      RzSliderOptions = _RzSliderOptions_;
+      $rootScope = _$rootScope_;
+      $timeout = _$timeout_;
+    }));
+
+    afterEach(function() {
+      helper.clean();
+    });
+
+    beforeEach(function() {
+      var sliderConf = {
+        min: 45,
+        max: 55,
+        options: {
+          floor: 0,
+          ceil: 100,
+          minRange: 10,
+          noSwitching: true,
+          rightToLeft: true
+        }
+      };
+      helper.createRangeSlider(sliderConf);
+    });
+    afterEach(function() {
+      // to clean document listener
+      helper.fireMouseup();
+    });
+
+    it('should not modify any value if new range would be smaller than minRange when moving minH', function() {
+      helper.fireMousedown(helper.slider.minH, 0);
+      var expectedValue = 50,
+        offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
+      helper.fireMousemove(-offset);
+      expect(helper.scope.slider.min).to.equal(45);
+    });
+
+    it('should not modify any value if new range would be smaller than minRange when moving maxH', function() {
+      helper.fireMousedown(helper.slider.maxH, 0);
+      var expectedValue = 50,
+        offset = helper.slider.maxPos - (helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp);
+      helper.fireMousemove(offset);
+      expect(helper.scope.slider.max).to.equal(55);
+    });
+
+    it('should modify the min value if new range is larger than minRange when moving minH', function() {
+      helper.fireMousedown(helper.slider.minH, 0);
+      var expectedValue = 30,
+        offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
+      helper.fireMousemove(offset);
+      expect(helper.scope.slider.min).to.equal(expectedValue);
+    });
+
+    it('should modify the max value if new range is larger than than minRange when moving maxH', function() {
+      helper.fireMousedown(helper.slider.maxH, 0);
+      var expectedValue = 70,
+        offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
+      helper.fireMousemove(offset);
+      expect(helper.scope.slider.max).to.equal(expectedValue);
+    });
+
+    it('should not switch min/max when moving minH even if the range is large enough', function() {
+      helper.fireMousedown(helper.slider.minH, 0);
+      var expectedValue = 80,
+        offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
+      helper.fireMousemove(-offset);
+      expect(helper.scope.slider.min).to.equal(45);
+      expect(helper.scope.slider.max).to.equal(55);
+    });
+
+    it('should not switch min/max when moving maxH even if the range is large enough', function() {
+      helper.fireMousedown(helper.slider.maxH, 0);
+      var expectedValue = 20,
+        offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
+      helper.fireMousemove(offset);
+      expect(helper.scope.slider.min).to.equal(45);
+      expect(helper.scope.slider.max).to.equal(55);
+    });
+  });
+
 }());
 

tests/specs/mouse-controls/minRange-range-slider-horizontal-test.js

@@ -87,5 +87,94 @@
       expect(helper.scope.slider.max).to.equal(45);
     });
   });
+
+  describe('Right to left Mouse controls - minRange!=0 Range Horizontal', function() {
+    var helper,
+      RzSliderOptions,
+      $rootScope,
+      $timeout;
+
+    beforeEach(module('test-helper'));
+
+    beforeEach(inject(function(TestHelper, _RzSliderOptions_, _$rootScope_, _$timeout_) {
+      helper = TestHelper;
+      RzSliderOptions = _RzSliderOptions_;
+      $rootScope = _$rootScope_;
+      $timeout = _$timeout_;
+    }));
+
+    afterEach(function() {
+      helper.clean();
+    });
+
+    beforeEach(function() {
+      var sliderConf = {
+        min: 45,
+        max: 55,
+        options: {
+          floor: 0,
+          ceil: 100,
+          minRange: 10,
+          rightToLeft: true
+        }
+
+      };
+      helper.createRangeSlider(sliderConf);
+    });
+    afterEach(function() {
+      // to clean document listener
+      helper.fireMouseup();
+    });
+
+    it('should not modify any value if new range would be smaller than minRange when moving minH', function() {
+      helper.fireMousedown(helper.slider.minH, 0);
+      var expectedValue = 50,
+        offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
+      helper.fireMousemove(offset);
+      expect(helper.scope.slider.min).to.equal(45);
+    });
+
+    it('should not modify any value if new range would be smaller than minRange when moving maxH', function() {
+      helper.fireMousedown(helper.slider.maxH, 0);
+      var expectedValue = 50,
+        offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
+      helper.fireMousemove(offset);
+      expect(helper.scope.slider.max).to.equal(55);
+    });
+
+    it('should modify the min value if new range is larger than minRange when moving minH', function() {
+      helper.fireMousedown(helper.slider.minH, 0);
+      var expectedValue = 30,
+        offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
+      helper.fireMousemove(offset);
+      expect(helper.scope.slider.min).to.equal(expectedValue);
+    });
+
+    it('should modify the max value if new range is larger than than minRange when moving maxH', function() {
+      helper.fireMousedown(helper.slider.maxH, 0);
+      var expectedValue = 70,
+        offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
+      helper.fireMousemove(offset);
+      expect(helper.scope.slider.max).to.equal(expectedValue);
+    });
+
+    it('should modify the min value if switch min/max with a value large enough', function() {
+      helper.fireMousedown(helper.slider.minH, 0);
+      var expectedValue = 80,
+        offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
+      helper.fireMousemove(offset);
+      expect(helper.scope.slider.min).to.equal(55);
+      expect(helper.scope.slider.max).to.equal(expectedValue);
+    });
+
+    it('should modify the max value if switch min/max with a value large enough', function() {
+      helper.fireMousedown(helper.slider.maxH, 0);
+      var expectedValue = 20,
+        offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
+      helper.fireMousemove(offset);
+      expect(helper.scope.slider.min).to.equal(expectedValue);
+      expect(helper.scope.slider.max).to.equal(45);
+    });
+  });
 }());
 

tests/specs/mouse-controls/noSwitching-range-slider-horizontal-test.js

@@ -79,5 +79,85 @@
       expect(helper.scope.slider.max).to.equal(70);
     });
   });
+
+  describe('Right to left Mouse controls - noSwitching Range Horizontal', function() {
+    var helper,
+      RzSliderOptions,
+      $rootScope,
+      $timeout;
+
+    beforeEach(module('test-helper'));
+
+    beforeEach(inject(function(TestHelper, _RzSliderOptions_, _$rootScope_, _$timeout_) {
+      helper = TestHelper;
+      RzSliderOptions = _RzSliderOptions_;
+      $rootScope = _$rootScope_;
+      $timeout = _$timeout_;
+    }));
+
+    afterEach(function() {
+      helper.clean();
+    });
+
+    beforeEach(function() {
+      var sliderConf = {
+        min: 45,
+        max: 55,
+        options: {
+          floor: 0,
+          ceil: 100,
+          noSwitching: true,
+          rightToLeft: true
+        }
+      };
+      helper.createRangeSlider(sliderConf);
+    });
+    afterEach(function() {
+      // to clean document listener
+      helper.fireMouseup();
+    });
+
+    it('should not switch min and max handles if minH is dragged after maxH', function() {
+      helper.fireMousedown(helper.slider.minH, 0);
+      var expectedValue = 60,
+        offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
+      helper.fireMousemove(offset);
+      expect(helper.scope.slider.min).to.equal(55);
+    });
+
+    it('should not switch min and max handles if maxH is dragged before minH', function() {
+      helper.fireMousedown(helper.slider.maxH, 0);
+      var expectedValue = 20,
+        offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
+      helper.fireMousemove(offset);
+      expect(helper.scope.slider.max).to.equal(45);
+    });
+
+    it('should move minH if minH==maxH and click is on the left side of the bar', function() {
+      helper.scope.slider.min = helper.scope.slider.max = 50;
+      helper.scope.$digest();
+
+      var expectedValue = 30,
+        offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
+
+      helper.fireMousedown(helper.slider.fullBar, offset);
+
+      expect(helper.scope.slider.min).to.equal(30);
+      expect(helper.scope.slider.max).to.equal(50);
+    });
+
+    it('should move maxH if minH==maxH and click is on the right side of the bar', function() {
+      helper.scope.slider.min = helper.scope.slider.max = 50;
+      helper.scope.$digest();
+
+      var expectedValue = 70,
+        offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
+
+      helper.fireMousedown(helper.slider.fullBar, offset);
+
+      expect(helper.scope.slider.min).to.equal(50);
+      expect(helper.scope.slider.max).to.equal(70);
+    });
+  });
 }());
 

tests/specs/mouse-controls/onlyBindHandles-single-slider-horizontal-test.js

@@ -62,5 +62,68 @@
       helper.slider.positionTrackingHandle.called.should.be.false;
     });
   });
+
+  describe('Right to left Mouse controls - onlyBindHandles Single Horizontal', function() {
+    var helper,
+      RzSliderOptions,
+      $rootScope,
+      $timeout;
+
+    beforeEach(module('test-helper'));
+
+    beforeEach(inject(function(TestHelper, _RzSliderOptions_, _$rootScope_, _$timeout_) {
+      helper = TestHelper;
+      RzSliderOptions = _RzSliderOptions_;
+      $rootScope = _$rootScope_;
+      $timeout = _$timeout_;
+    }));
+
+    afterEach(function() {
+      helper.clean();
+    });
+
+    beforeEach(function() {
+      var sliderConf = {
+        value: 0,
+        options: {
+          floor: 0,
+          ceil: 100,
+          showTicks: true,
+          onlyBindHandles: true,
+          rightToLeft: true
+        }
+      };
+      helper.createSlider(sliderConf);
+    });
+    afterEach(function() {
+      // to clean document listener
+      helper.fireMouseup();
+    });
+
+    it('should handle click and drag on minH correctly when mouse is on the middle', function() {
+      sinon.spy(helper.slider, 'positionTrackingHandle');
+      sinon.spy(helper.slider, 'callOnChange');
+      helper.fireMousedown(helper.slider.minH, 0);
+      var expectedValue = 50,
+        offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
+      helper.fireMousemove(offset);
+      expect(helper.scope.slider.value).to.equal(expectedValue);
+      helper.slider.positionTrackingHandle.called.should.be.true;
+      helper.slider.callOnChange.called.should.be.true;
+    });
+
+    it('should do nothing when a click happen on another element than the handle', function() {
+      helper.scope.slider.value = 100;
+      helper.scope.$digest();
+
+      sinon.spy(helper.slider, 'positionTrackingHandle');
+      helper.fireMousedown(helper.slider.selBar, 0);
+      helper.fireMousedown(helper.slider.fullBar, 0);
+      helper.fireMousedown(helper.slider.ticks, 0);
+
+      expect(helper.scope.slider.value).to.equal(100);
+      helper.slider.positionTrackingHandle.called.should.be.false;
+    });
+  });
 }());
 

tests/specs/mouse-controls/range-slider-horizontal-test.js

@@ -272,5 +272,278 @@
       helper.slider.callOnChange.called.should.be.true;
     });
   });
+
+  describe('Right to left Mouse controls - Range Horizontal', function() {
+    var helper,
+      RzSliderOptions,
+      $rootScope,
+      $timeout;
+
+    beforeEach(module('test-helper'));
+
+    beforeEach(inject(function(TestHelper, _RzSliderOptions_, _$rootScope_, _$timeout_) {
+      helper = TestHelper;
+      RzSliderOptions = _RzSliderOptions_;
+      $rootScope = _$rootScope_;
+      $timeout = _$timeout_;
+    }));
+
+    afterEach(function() {
+      helper.clean();
+    });
+
+    beforeEach(function() {
+      var sliderConf = {
+        min: 0,
+        max: 100,
+        options: {
+          floor: 0,
+          ceil: 100,
+          rightToLeft: true
+        }
+      };
+      helper.createRangeSlider(sliderConf);
+    });
+    afterEach(function() {
+      // to clean document listener
+      helper.fireMouseup();
+    });
+
+    it('should handle mousedown on minH correctly when keyboardSupport is true', function() {
+      sinon.spy(helper.slider, 'calcViewDimensions');
+      sinon.spy(helper.slider, 'callOnStart');
+      sinon.spy(helper.slider, 'focusElement');
+
+      var event = helper.fireMousedown(helper.slider.minH, 0);
+
+      helper.slider.calcViewDimensions.called.should.be.true;
+      helper.slider.callOnStart.called.should.be.true;
+      helper.slider.focusElement.calledWith(helper.slider.minH).should.be.true;
+      event.preventDefault.called.should.be.true;
+      event.stopPropagation.called.should.be.true;
+      expect(helper.slider.tracking).to.equal('rzSliderModel');
+      expect(helper.slider.minH.hasClass('rz-active')).to.be.true;
+    });
+
+    it('should handle mousedown on minH correctly when keyboardSupport is false', function() {
+      helper.scope.slider.options.keyboardSupport = false;
+      helper.scope.$digest();
+
+      sinon.spy(helper.slider, 'calcViewDimensions');
+      sinon.spy(helper.slider, 'callOnStart');
+      sinon.spy(helper.slider, 'focusElement');
+
+      var event = helper.fireMousedown(helper.slider.minH, 0);
+
+      helper.slider.calcViewDimensions.called.should.be.true;
+      helper.slider.callOnStart.called.should.be.true;
+      helper.slider.focusElement.called.should.be.false;
+      event.preventDefault.called.should.be.true;
+      event.stopPropagation.called.should.be.true;
+      expect(helper.slider.tracking).to.equal('rzSliderModel');
+      expect(helper.slider.minH.hasClass('rz-active')).to.be.true;
+    });
+
+    it('should handle mousedown on maxH correctly when keyboardSupport is true', function() {
+      sinon.spy(helper.slider, 'calcViewDimensions');
+      sinon.spy(helper.slider, 'callOnStart');
+      sinon.spy(helper.slider, 'focusElement');
+
+      var event = helper.fireMousedown(helper.slider.maxH, 0);
+
+      helper.slider.calcViewDimensions.called.should.be.true;
+      helper.slider.callOnStart.called.should.be.true;
+      helper.slider.focusElement.calledWith(helper.slider.maxH).should.be.true;
+      event.preventDefault.called.should.be.true;
+      event.stopPropagation.called.should.be.true;
+      expect(helper.slider.tracking).to.equal('rzSliderHigh');
+      expect(helper.slider.maxH.hasClass('rz-active')).to.be.true;
+    });
+
+    it('should handle mousedown on maxH correctly when keyboardSupport is false', function() {
+      helper.scope.slider.options.keyboardSupport = false;
+      helper.scope.$digest();
+
+      sinon.spy(helper.slider, 'calcViewDimensions');
+      sinon.spy(helper.slider, 'callOnStart');
+      sinon.spy(helper.slider, 'focusElement');
+
+      var event = helper.fireMousedown(helper.slider.maxH, 0);
+
+      helper.slider.calcViewDimensions.called.should.be.true;
+      helper.slider.callOnStart.called.should.be.true;
+      helper.slider.focusElement.called.should.be.false;
+      event.preventDefault.called.should.be.true;
+      event.stopPropagation.called.should.be.true;
+      expect(helper.slider.tracking).to.equal('rzSliderHigh');
+      expect(helper.slider.maxH.hasClass('rz-active')).to.be.true;
+    });
+
+    it('should handle click and drag on minH correctly when mouse is on the middle', function() {
+      sinon.spy(helper.slider, 'positionTrackingHandle');
+      sinon.spy(helper.slider, 'callOnChange');
+      var event = helper.fireMousedown(helper.slider.minH, 0);
+      var expectedValue = 50,
+        offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
+      helper.fireMousemove(offset);
+      expect(helper.scope.slider.min).to.equal(expectedValue);
+      helper.slider.positionTrackingHandle.called.should.be.true;
+      helper.slider.callOnChange.called.should.be.true;
+    });
+
+    it('should handle click and drag on maxH correctly when mouse is on the middle', function() {
+      sinon.spy(helper.slider, 'positionTrackingHandle');
+      sinon.spy(helper.slider, 'callOnChange');
+      helper.fireMousedown(helper.slider.maxH, 0);
+      var expectedValue = 50,
+        offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
+      helper.fireMousemove(offset);
+      expect(helper.scope.slider.max).to.equal(expectedValue);
+      helper.slider.positionTrackingHandle.called.should.be.true;
+      helper.slider.callOnChange.called.should.be.true;
+    });
+
+    it('should handle click and drag on minH and switch min/max if needed', function() {
+      helper.scope.slider.min = 40;
+      helper.scope.slider.max = 60;
+      helper.scope.$digest();
+
+      sinon.spy(helper.slider, 'focusElement');
+      helper.fireMousedown(helper.slider.minH, 0);
+      var expectedValue = 80,
+        offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
+      helper.fireMousemove(offset);
+
+      expect(helper.scope.slider.min).to.equal(60);
+      expect(helper.scope.slider.max).to.equal(80);
+      helper.slider.focusElement.calledWith(helper.slider.maxH).should.be.true;
+    });
+
+    it('should handle click and drag on minH and switch min/max if needed when keyboardSupport is false', function() {
+      helper.scope.slider.options.keyboardSupport = false;
+      helper.scope.slider.min = 40;
+      helper.scope.slider.max = 60;
+      helper.scope.$digest();
+
+      sinon.spy(helper.slider, 'focusElement');
+      helper.fireMousedown(helper.slider.minH, 0);
+      var expectedValue = 80,
+        offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
+      helper.fireMousemove(offset);
+
+      expect(helper.scope.slider.min).to.equal(60);
+      expect(helper.scope.slider.max).to.equal(80);
+      helper.slider.focusElement.called.should.be.false;
+    });
+
+    it('should handle click and drag on maxH and switch min/max if needed', function() {
+      helper.scope.slider.min = 40;
+      helper.scope.slider.max = 60;
+      helper.scope.$digest();
+
+      sinon.spy(helper.slider, 'focusElement');
+      helper.fireMousedown(helper.slider.maxH, 0);
+      var expectedValue = 20,
+        offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
+      helper.fireMousemove(offset);
+
+      expect(helper.scope.slider.min).to.equal(20);
+      expect(helper.scope.slider.max).to.equal(40);
+      helper.slider.focusElement.calledWith(helper.slider.minH).should.be.true;
+    });
+
+    it('should handle click and drag on maxH and switch min/max if needed when keyboardSupport is false', function() {
+      helper.scope.slider.options.keyboardSupport = false;
+      helper.scope.slider.min = 40;
+      helper.scope.slider.max = 60;
+      helper.scope.$digest();
+
+      sinon.spy(helper.slider, 'focusElement');
+      helper.fireMousedown(helper.slider.maxH, 0);
+      var expectedValue = 20,
+        offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
+      helper.fireMousemove(offset);
+
+      expect(helper.scope.slider.min).to.equal(20);
+      expect(helper.scope.slider.max).to.equal(40);
+      helper.slider.focusElement.called.should.be.false;
+    });
+
+    it('should handle click on fullbar and move minH when click pos is nearer to minH', function() {
+      sinon.spy(helper.slider, 'positionTrackingHandle');
+      sinon.spy(helper.slider, 'callOnStart');
+      sinon.spy(helper.slider, 'callOnChange');
+      sinon.spy(helper.slider, 'focusElement');
+
+      var expectedValue = 10,
+        offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
+
+      var event = helper.fireMousedown(helper.slider.fullBar, offset);
+
+      expect(helper.scope.slider.min).to.equal(expectedValue);
+      expect(helper.slider.tracking).to.equal('rzSliderModel');
+      helper.slider.focusElement.calledWith(helper.slider.minH).should.be.true;
+      helper.slider.positionTrackingHandle.called.should.be.true;
+      helper.slider.callOnStart.called.should.be.true;
+      helper.slider.callOnChange.called.should.be.true;
+    });
+
+    it('should handle click on fullbar and move maxH when click pos is nearer to maxH', function() {
+      sinon.spy(helper.slider, 'positionTrackingHandle');
+      sinon.spy(helper.slider, 'callOnStart');
+      sinon.spy(helper.slider, 'callOnChange');
+      sinon.spy(helper.slider, 'focusElement');
+
+      var expectedValue = 90,
+        offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
+
+      var event = helper.fireMousedown(helper.slider.fullBar, offset);
+
+      expect(helper.scope.slider.max).to.equal(expectedValue);
+      expect(helper.slider.tracking).to.equal('rzSliderHigh');
+      helper.slider.focusElement.calledWith(helper.slider.maxH).should.be.true;
+      helper.slider.positionTrackingHandle.called.should.be.true;
+      helper.slider.callOnStart.called.should.be.true;
+      helper.slider.callOnChange.called.should.be.true;
+    });
+
+    it('should handle click on selbar and move minH when click pos is nearer to minH', function() {
+      sinon.spy(helper.slider, 'positionTrackingHandle');
+      sinon.spy(helper.slider, 'callOnStart');
+      sinon.spy(helper.slider, 'callOnChange');
+      sinon.spy(helper.slider, 'focusElement');
+
+      var expectedValue = 10,
+        offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
+
+      var event = helper.fireMousedown(helper.slider.selBar, offset);
+
+      expect(helper.scope.slider.min).to.equal(expectedValue);
+      expect(helper.slider.tracking).to.equal('rzSliderModel');
+      helper.slider.focusElement.calledWith(helper.slider.minH).should.be.true;
+      helper.slider.positionTrackingHandle.called.should.be.true;
+      helper.slider.callOnStart.called.should.be.true;
+      helper.slider.callOnChange.called.should.be.true;
+    });
+
+    it('should handle click on selbar and move maxH when click pos is nearer to maxH', function() {
+      sinon.spy(helper.slider, 'positionTrackingHandle');
+      sinon.spy(helper.slider, 'callOnStart');
+      sinon.spy(helper.slider, 'callOnChange');
+      sinon.spy(helper.slider, 'focusElement');
+
+      var expectedValue = 90,
+        offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
+
+      var event = helper.fireMousedown(helper.slider.selBar, offset);
+
+      expect(helper.scope.slider.max).to.equal(expectedValue);
+      expect(helper.slider.tracking).to.equal('rzSliderHigh');
+      helper.slider.focusElement.calledWith(helper.slider.maxH).should.be.true;
+      helper.slider.positionTrackingHandle.called.should.be.true;
+      helper.slider.callOnStart.called.should.be.true;
+      helper.slider.callOnChange.called.should.be.true;
+    });
+  });
 }());
 

tests/specs/mouse-controls/range-slider-vertical-test.js

@@ -235,5 +235,241 @@
       helper.slider.callOnChange.called.should.be.true;
     });
   });
+
+  describe('Right to left Mouse controls - Range Vertical', function() {
+    var helper,
+      RzSliderOptions,
+      $rootScope,
+      $timeout;
+
+    beforeEach(module('test-helper'));
+
+    beforeEach(inject(function(TestHelper, _RzSliderOptions_, _$rootScope_, _$timeout_) {
+      helper = TestHelper;
+      RzSliderOptions = _RzSliderOptions_;
+      $rootScope = _$rootScope_;
+      $timeout = _$timeout_;
+    }));
+
+    afterEach(function() {
+      helper.clean();
+    });
+
+    beforeEach(function() {
+      var sliderConf = {
+        min: 0,
+        max: 100,
+        options: {
+          floor: 0,
+          ceil: 100,
+          vertical: true,
+          rightToLeft: true
+        }
+      };
+      helper.createRangeSlider(sliderConf);
+    });
+    afterEach(function() {
+      // to clean document listener
+      helper.fireMouseup();
+    });
+
+    it('should handle mousedown on minH correctly when keyboardSupport is true', function() {
+      sinon.spy(helper.slider, 'calcViewDimensions');
+      sinon.spy(helper.slider, 'callOnStart');
+      sinon.spy(helper.slider, 'focusElement');
+
+      var event = helper.fireMousedown(helper.slider.minH, 0, true);
+
+      helper.slider.calcViewDimensions.called.should.be.true;
+      helper.slider.callOnStart.called.should.be.true;
+      helper.slider.focusElement.calledWith(helper.slider.minH).should.be.true;
+      event.preventDefault.called.should.be.true;
+      event.stopPropagation.called.should.be.true;
+      expect(helper.slider.tracking).to.equal('rzSliderModel');
+      expect(helper.slider.minH.hasClass('rz-active')).to.be.true;
+    });
+
+    it('should handle mousedown on minH correctly when keyboardSupport is false', function() {
+      helper.scope.slider.options.keyboardSupport = false;
+      helper.scope.$digest();
+
+      sinon.spy(helper.slider, 'calcViewDimensions');
+      sinon.spy(helper.slider, 'callOnStart');
+      sinon.spy(helper.slider, 'focusElement');
+
+      var event = helper.fireMousedown(helper.slider.minH, 0, true);
+
+      helper.slider.calcViewDimensions.called.should.be.true;
+      helper.slider.callOnStart.called.should.be.true;
+      helper.slider.focusElement.called.should.be.false;
+      event.preventDefault.called.should.be.true;
+      event.stopPropagation.called.should.be.true;
+      expect(helper.slider.tracking).to.equal('rzSliderModel');
+      expect(helper.slider.minH.hasClass('rz-active')).to.be.true;
+    });
+
+    it('should handle mousedown on maxH correctly when keyboardSupport is true', function() {
+      sinon.spy(helper.slider, 'calcViewDimensions');
+      sinon.spy(helper.slider, 'callOnStart');
+      sinon.spy(helper.slider, 'focusElement');
+
+      var event = helper.fireMousedown(helper.slider.maxH, 0, true);
+
+      helper.slider.calcViewDimensions.called.should.be.true;
+      helper.slider.callOnStart.called.should.be.true;
+      helper.slider.focusElement.calledWith(helper.slider.maxH).should.be.true;
+      event.preventDefault.called.should.be.true;
+      event.stopPropagation.called.should.be.true;
+      expect(helper.slider.tracking).to.equal('rzSliderHigh');
+      expect(helper.slider.maxH.hasClass('rz-active')).to.be.true;
+    });
+
+    it('should handle mousedown on maxH correctly when keyboardSupport is false', function() {
+      helper.scope.slider.options.keyboardSupport = false;
+      helper.scope.$digest();
+
+      sinon.spy(helper.slider, 'calcViewDimensions');
+      sinon.spy(helper.slider, 'callOnStart');
+      sinon.spy(helper.slider, 'focusElement');
+
+      var event = helper.fireMousedown(helper.slider.maxH, 0, true);
+
+      helper.slider.calcViewDimensions.called.should.be.true;
+      helper.slider.callOnStart.called.should.be.true;
+      helper.slider.focusElement.called.should.be.false;
+      event.preventDefault.called.should.be.true;
+      event.stopPropagation.called.should.be.true;
+      expect(helper.slider.tracking).to.equal('rzSliderHigh');
+      expect(helper.slider.maxH.hasClass('rz-active')).to.be.true;
+    });
+
+    it('should handle click and drag on minH correctly when mouse is on the middle', function() {
+      sinon.spy(helper.slider, 'positionTrackingHandle');
+      sinon.spy(helper.slider, 'callOnChange');
+      var event = helper.fireMousedown(helper.slider.minH, 0, true);
+      var expectedValue = 50,
+        offset = helper.slider.sliderElem.rzsp - helper.slider.valueToOffset(expectedValue) - helper.slider.handleHalfDim;
+      helper.fireMousemove(offset, true);
+      expect(helper.scope.slider.min).to.equal(expectedValue);
+      helper.slider.positionTrackingHandle.called.should.be.true;
+      helper.slider.callOnChange.called.should.be.true;
+    });
+
+    it('should handle click and drag on maxH correctly when mouse is on the middle', function() {
+      sinon.spy(helper.slider, 'positionTrackingHandle');
+      sinon.spy(helper.slider, 'callOnChange');
+      var event = helper.fireMousedown(helper.slider.maxH, 0, true);
+      var expectedValue = 50,
+        offset = helper.slider.sliderElem.rzsp - helper.slider.valueToOffset(expectedValue) - helper.slider.handleHalfDim;
+      helper.fireMousemove(offset, true);
+      expect(helper.scope.slider.max).to.equal(expectedValue);
+      helper.slider.positionTrackingHandle.called.should.be.true;
+      helper.slider.callOnChange.called.should.be.true;
+    });
+
+    it('should handle click and drag on minH and switch min/max if needed', function() {
+      helper.scope.slider.min = 40;
+      helper.scope.slider.max = 60;
+      helper.scope.$digest();
+
+      var event = helper.fireMousedown(helper.slider.minH, 0, true);
+      var expectedValue = 80,
+        offset = helper.slider.sliderElem.rzsp - helper.slider.valueToOffset(expectedValue) - helper.slider.handleHalfDim;
+      helper.fireMousemove(offset, true);
+
+      expect(helper.scope.slider.min).to.equal(60);
+      expect(helper.scope.slider.max).to.equal(80);
+    });
+
+    it('should handle click and drag on maxH and switch min/max if needed', function() {
+      helper.scope.slider.min = 40;
+      helper.scope.slider.max = 60;
+      helper.scope.$digest();
+
+      var event = helper.fireMousedown(helper.slider.maxH, 0, true);
+      var expectedValue = 20,
+        offset = helper.slider.sliderElem.rzsp - helper.slider.valueToOffset(expectedValue) - helper.slider.handleHalfDim;
+      helper.fireMousemove(offset, true);
+
+      expect(helper.scope.slider.min).to.equal(20);
+      expect(helper.scope.slider.max).to.equal(40);
+    });
+
+    it('should handle click on fullbar and move minH when click pos is nearer to minH', function() {
+      sinon.spy(helper.slider, 'positionTrackingHandle');
+      sinon.spy(helper.slider, 'callOnStart');
+      sinon.spy(helper.slider, 'callOnChange');
+      sinon.spy(helper.slider, 'focusElement');
+
+      var expectedValue = 10,
+        offset = helper.slider.sliderElem.rzsp - helper.slider.valueToOffset(expectedValue) - helper.slider.handleHalfDim;
+
+      var event = helper.fireMousedown(helper.slider.fullBar, offset, true);
+
+      expect(helper.scope.slider.min).to.equal(expectedValue);
+      expect(helper.slider.tracking).to.equal('rzSliderModel');
+      helper.slider.focusElement.calledWith(helper.slider.minH).should.be.true;
+      helper.slider.positionTrackingHandle.called.should.be.true;
+      helper.slider.callOnStart.called.should.be.true;
+      helper.slider.callOnChange.called.should.be.true;
+    });
+
+    it('should handle click on fullbar and move maxH when click pos is nearer to maxH', function() {
+      sinon.spy(helper.slider, 'positionTrackingHandle');
+      sinon.spy(helper.slider, 'callOnStart');
+      sinon.spy(helper.slider, 'callOnChange');
+      sinon.spy(helper.slider, 'focusElement');
+
+      var expectedValue = 90,
+        offset = helper.slider.sliderElem.rzsp - helper.slider.valueToOffset(expectedValue) - helper.slider.handleHalfDim;
+
+      var event = helper.fireMousedown(helper.slider.fullBar, offset, true);
+
+      expect(helper.scope.slider.max).to.equal(expectedValue);
+      expect(helper.slider.tracking).to.equal('rzSliderHigh');
+      helper.slider.focusElement.calledWith(helper.slider.maxH).should.be.true;
+      helper.slider.positionTrackingHandle.called.should.be.true;
+      helper.slider.callOnStart.called.should.be.true;
+      helper.slider.callOnChange.called.should.be.true;
+    });
+
+    it('should handle click on selbar and move minH when click pos is nearer to minH', function() {
+      sinon.spy(helper.slider, 'positionTrackingHandle');
+      sinon.spy(helper.slider, 'callOnStart');
+      sinon.spy(helper.slider, 'callOnChange');
+      sinon.spy(helper.slider, 'focusElement');
+
+      var expectedValue = 10,
+        offset = helper.slider.sliderElem.rzsp - helper.slider.valueToOffset(expectedValue) - helper.slider.handleHalfDim;
+
+      var event = helper.fireMousedown(helper.slider.selBar, offset, true);
+
+      expect(helper.scope.slider.min).to.equal(expectedValue);
+      expect(helper.slider.tracking).to.equal('rzSliderModel');
+      helper.slider.focusElement.calledWith(helper.slider.minH).should.be.true;
+      helper.slider.positionTrackingHandle.called.should.be.true;
+      helper.slider.callOnStart.called.should.be.true;
+      helper.slider.callOnChange.called.should.be.true;
+    });
+
+    it('should handle click on selbar and move maxH when click pos is nearer to maxH', function() {
+      sinon.spy(helper.slider, 'positionTrackingHandle');
+      sinon.spy(helper.slider, 'callOnStart');
+      sinon.spy(helper.slider, 'callOnChange');
+      sinon.spy(helper.slider, 'focusElement');
+
+      var expectedValue = 90,
+        offset = helper.slider.sliderElem.rzsp - helper.slider.valueToOffset(expectedValue) - helper.slider.handleHalfDim;
+
+      var event = helper.fireMousedown(helper.slider.selBar, offset, true);
+
+      expect(helper.scope.slider.max).to.equal(expectedValue);
+      expect(helper.slider.tracking).to.equal('rzSliderHigh');
+      helper.slider.focusElement.calledWith(helper.slider.maxH).should.be.true;
+      helper.slider.positionTrackingHandle.called.should.be.true;
+      helper.slider.callOnStart.called.should.be.true;
+      helper.slider.callOnChange.called.should.be.true;
+    });
+  });
 }());
 

tests/specs/mouse-controls/single-slider-horizontal-test.js

@@ -9,18 +9,18 @@
 
     beforeEach(module('test-helper'));
 
-    beforeEach(inject(function(TestHelper, _RzSliderOptions_, _$rootScope_, _$timeout_) {
+    beforeEach(inject(function (TestHelper, _RzSliderOptions_, _$rootScope_, _$timeout_) {
       helper = TestHelper;
       RzSliderOptions = _RzSliderOptions_;
       $rootScope = _$rootScope_;
       $timeout = _$timeout_;
     }));
 
-    afterEach(function() {
+    afterEach(function () {
       helper.clean();
     });
 
-    beforeEach(function() {
+    beforeEach(function () {
       var sliderConf = {
         value: 0,
         options: {
@@ -30,12 +30,12 @@
       };
       helper.createSlider(sliderConf);
     });
-    afterEach(function() {
+    afterEach(function () {
       // to clean document listener
       helper.fireMouseup();
     });
 
-    it('should handle mousedown on minH correctly when keyboardSupport is true', function() {
+    it('should handle mousedown on minH correctly when keyboardSupport is true', function () {
       sinon.spy(helper.slider, 'calcViewDimensions');
       sinon.spy(helper.slider, 'callOnStart');
       sinon.spy(helper.slider, 'focusElement');
@@ -51,7 +51,7 @@
       expect(helper.slider.minH.hasClass('rz-active')).to.be.true;
     });
 
-    it('should handle mousedown on minH correctly when keyboardSupport is false', function() {
+    it('should handle mousedown on minH correctly when keyboardSupport is false', function () {
       helper.scope.slider.options.keyboardSupport = false;
       helper.scope.$digest();
 
@@ -70,7 +70,7 @@
       expect(helper.slider.minH.hasClass('rz-active')).to.be.true;
     });
 
-    it('should handle click and drag on minH correctly when mouse is on the middle', function() {
+    it('should handle click and drag on minH correctly when mouse is on the middle', function () {
       sinon.spy(helper.slider, 'positionTrackingHandle');
       sinon.spy(helper.slider, 'callOnChange');
       var event = helper.fireMousedown(helper.slider.minH, 0);
@@ -82,7 +82,7 @@
       helper.slider.callOnChange.called.should.be.true;
     });
 
-    it('should handle click and drag on minH correctly when mouse is before the slider and previous value was different than 0', function() {
+    it('should handle click and drag on minH correctly when mouse is before the slider and previous value was different than 0', function () {
       helper.scope.slider.value = 50;
       helper.scope.$digest();
 
@@ -93,7 +93,7 @@
       helper.slider.positionTrackingHandle.called.should.be.true;
     });
 
-    it('should handle click and drag on minH correctly when mouse is after the slider and previous value was different than 100', function() {
+    it('should handle click and drag on minH correctly when mouse is after the slider and previous value was different than 100', function () {
       sinon.spy(helper.slider, 'positionTrackingHandle');
       var event = helper.fireMousedown(helper.slider.minH, 0);
       helper.fireMousemove(helper.slider.maxPos + 100);
@@ -101,7 +101,7 @@
       helper.slider.positionTrackingHandle.called.should.be.true;
     });
 
-    it('should call correct callbacks on slider end and keep handle focused when keyboardSupport is true', function() {
+    it('should call correct callbacks on slider end and keep handle focused when keyboardSupport is true', function () {
       var event = helper.fireMousedown(helper.slider.minH, 0);
 
       sinon.spy(helper.slider, 'callOnEnd');
@@ -114,7 +114,7 @@
       helper.slider.scope.$emit.calledWith('slideEnded').should.be.true;
     });
 
-    it('should call correct callbacks on slider end and not keep handle focused when keyboardSupport is false', function() {
+    it('should call correct callbacks on slider end and not keep handle focused when keyboardSupport is false', function () {
       helper.scope.slider.options.keyboardSupport = false;
       helper.scope.$digest();
       var event = helper.fireMousedown(helper.slider.minH, 0);
@@ -130,7 +130,7 @@
       helper.slider.scope.$emit.calledWith('slideEnded').should.be.true;
     });
 
-    it('should handle click on fullbar and move minH', function() {
+    it('should handle click on fullbar and move minH', function () {
       sinon.spy(helper.slider, 'positionTrackingHandle');
       sinon.spy(helper.slider, 'callOnStart');
       sinon.spy(helper.slider, 'callOnChange');
@@ -147,7 +147,7 @@
       helper.slider.callOnChange.called.should.be.true;
     });
 
-    it('should handle click on selbar and move minH', function() {
+    it('should handle click on selbar and move minH', function () {
       sinon.spy(helper.slider, 'positionTrackingHandle');
       sinon.spy(helper.slider, 'callOnStart');
       sinon.spy(helper.slider, 'callOnChange');
@@ -164,7 +164,7 @@
       helper.slider.callOnChange.called.should.be.true;
     });
 
-    it('should handle click on ticks and move minH', function() {
+    it('should handle click on ticks and move minH', function () {
       helper.scope.slider.options.step = 10;
       helper.scope.slider.options.showTicks = true;
       helper.scope.$digest();
@@ -184,5 +184,190 @@
       helper.slider.callOnChange.called.should.be.true;
     });
   });
+
+    describe('Right to left Mouse controls - Single Horizontal', function() {
+      var helper,
+        RzSliderOptions,
+        $rootScope,
+        $timeout;
+
+      beforeEach(module('test-helper'));
+
+      beforeEach(inject(function(TestHelper, _RzSliderOptions_, _$rootScope_, _$timeout_) {
+        helper = TestHelper;
+        RzSliderOptions = _RzSliderOptions_;
+        $rootScope = _$rootScope_;
+        $timeout = _$timeout_;
+      }));
+
+      afterEach(function() {
+        helper.clean();
+      });
+
+      beforeEach(function() {
+        var sliderConf = {
+          value: 0,
+          options: {
+            floor: 0,
+            ceil: 100,
+            rightToLeft: true
+          }
+        };
+        helper.createSlider(sliderConf);
+      });
+      afterEach(function() {
+        // to clean document listener
+        helper.fireMouseup();
+      });
+
+      it('should handle mousedown on minH correctly when keyboardSupport is true', function() {
+        sinon.spy(helper.slider, 'calcViewDimensions');
+        sinon.spy(helper.slider, 'callOnStart');
+        sinon.spy(helper.slider, 'focusElement');
+
+        var event = helper.fireMousedown(helper.slider.minH, 0);
+
+        helper.slider.calcViewDimensions.called.should.be.true;
+        helper.slider.callOnStart.called.should.be.true;
+        helper.slider.focusElement.calledWith(helper.slider.minH).should.be.true;
+        event.preventDefault.called.should.be.true;
+        event.stopPropagation.called.should.be.true;
+        expect(helper.slider.tracking).to.equal('rzSliderModel');
+        expect(helper.slider.minH.hasClass('rz-active')).to.be.true;
+      });
+
+      it('should handle mousedown on minH correctly when keyboardSupport is false', function() {
+        helper.scope.slider.options.keyboardSupport = false;
+        helper.scope.$digest();
+
+        sinon.spy(helper.slider, 'calcViewDimensions');
+        sinon.spy(helper.slider, 'callOnStart');
+        sinon.spy(helper.slider, 'focusElement');
+
+        var event = helper.fireMousedown(helper.slider.minH, 0);
+
+        helper.slider.calcViewDimensions.called.should.be.true;
+        helper.slider.callOnStart.called.should.be.true;
+        helper.slider.focusElement.called.should.be.false;
+        event.preventDefault.called.should.be.true;
+        event.stopPropagation.called.should.be.true;
+        expect(helper.slider.tracking).to.equal('rzSliderModel');
+        expect(helper.slider.minH.hasClass('rz-active')).to.be.true;
+      });
+
+      it('should handle click and drag on minH correctly when mouse is on the middle', function() {
+        sinon.spy(helper.slider, 'positionTrackingHandle');
+        sinon.spy(helper.slider, 'callOnChange');
+        var event = helper.fireMousedown(helper.slider.minH, 0);
+        var expectedValue = 50,
+          offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
+        helper.fireMousemove(offset);
+        expect(helper.scope.slider.value).to.equal(expectedValue);
+        helper.slider.positionTrackingHandle.called.should.be.true;
+        helper.slider.callOnChange.called.should.be.true;
+      });
+
+      it('should handle click and drag on minH correctly when mouse is before the slider and previous value was different than 0', function() {
+        helper.scope.slider.value = 50;
+        helper.scope.$digest();
+        sinon.spy(helper.slider, 'positionTrackingHandle');
+        var event = helper.fireMousedown(helper.slider.minH, 0);
+        helper.fireMousemove(helper.slider.maxPos + 100);
+        expect(helper.scope.slider.value).to.equal(0);
+        helper.slider.positionTrackingHandle.called.should.be.true;
+      });
+
+      it('should handle click and drag on minH correctly when mouse is after the slider and previous value was different than 100', function() {
+        sinon.spy(helper.slider, 'positionTrackingHandle');
+        var event = helper.fireMousedown(helper.slider.minH, 0);
+        helper.fireMousemove(-100);
+        expect(helper.scope.slider.value).to.equal(100);
+        helper.slider.positionTrackingHandle.called.should.be.true;
+      });
+
+      it('should call correct callbacks on slider end and keep handle focused when keyboardSupport is true', function() {
+        var event = helper.fireMousedown(helper.slider.minH, 0);
+
+        sinon.spy(helper.slider, 'callOnEnd');
+        sinon.spy(helper.slider.scope, '$emit');
+        helper.fireMouseup();
+
+        expect(helper.slider.tracking).to.equal('rzSliderModel');
+        expect(helper.slider.minH.hasClass('rz-active')).to.be.true;
+        helper.slider.callOnEnd.called.should.be.true;
+        helper.slider.scope.$emit.calledWith('slideEnded').should.be.true;
+      });
+
+      it('should call correct callbacks on slider end and not keep handle focused when keyboardSupport is false', function() {
+        helper.scope.slider.options.keyboardSupport = false;
+        helper.scope.$digest();
+        var event = helper.fireMousedown(helper.slider.minH, 0);
+
+        sinon.spy(helper.slider, 'callOnEnd');
+        sinon.spy(helper.slider.scope, '$emit');
+
+        helper.fireMouseup();
+
+        expect(helper.slider.tracking).to.equal('');
+        expect(helper.slider.minH.hasClass('rz-active')).to.be.false;
+        helper.slider.callOnEnd.called.should.be.true;
+        helper.slider.scope.$emit.calledWith('slideEnded').should.be.true;
+      });
+
+      it('should handle click on fullbar and move minH', function() {
+        sinon.spy(helper.slider, 'positionTrackingHandle');
+        sinon.spy(helper.slider, 'callOnStart');
+        sinon.spy(helper.slider, 'callOnChange');
+
+        var expectedValue = 12,
+          offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
+
+        helper.fireMousedown(helper.slider.fullBar, offset);
+
+        expect(helper.scope.slider.value).to.equal(expectedValue);
+        expect(helper.slider.tracking).to.equal('rzSliderModel');
+        helper.slider.positionTrackingHandle.called.should.be.true;
+        helper.slider.callOnStart.called.should.be.true;
+        helper.slider.callOnChange.called.should.be.true;
+      });
+
+      it('should handle click on selbar and move minH', function() {
+        sinon.spy(helper.slider, 'positionTrackingHandle');
+        sinon.spy(helper.slider, 'callOnStart');
+        sinon.spy(helper.slider, 'callOnChange');
+
+        var expectedValue = 12,
+          offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
+
+        var event = helper.fireMousedown(helper.slider.selBar, offset);
+
+        expect(helper.scope.slider.value).to.equal(expectedValue);
+        expect(helper.slider.tracking).to.equal('rzSliderModel');
+        helper.slider.positionTrackingHandle.called.should.be.true;
+        helper.slider.callOnStart.called.should.be.true;
+        helper.slider.callOnChange.called.should.be.true;
+      });
+
+      it('should handle click on ticks and move minH', function() {
+        helper.scope.slider.options.step = 10;
+        helper.scope.slider.options.showTicks = true;
+        helper.scope.$digest();
+        sinon.spy(helper.slider, 'positionTrackingHandle');
+        sinon.spy(helper.slider, 'callOnStart');
+        sinon.spy(helper.slider, 'callOnChange');
+
+        var expectedValue = 10,
+          offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
+
+        helper.fireMousedown(helper.slider.ticks, offset);
+
+        expect(helper.scope.slider.value).to.equal(expectedValue);
+        expect(helper.slider.tracking).to.equal('rzSliderModel');
+        helper.slider.positionTrackingHandle.called.should.be.true;
+        helper.slider.callOnStart.called.should.be.true;
+        helper.slider.callOnChange.called.should.be.true;
+      });
+
+  });
 }());
 

tests/specs/mouse-controls/single-slider-vertical-test.js

@@ -187,5 +187,194 @@
       helper.slider.callOnChange.called.should.be.true;
     });
   });
+
+  describe('Right to left Mouse controls - Single Vertical', function() {
+    var helper,
+      RzSliderOptions,
+      $rootScope,
+      $timeout;
+
+    beforeEach(module('test-helper'));
+
+    beforeEach(inject(function(TestHelper, _RzSliderOptions_, _$rootScope_, _$timeout_) {
+      helper = TestHelper;
+      RzSliderOptions = _RzSliderOptions_;
+      $rootScope = _$rootScope_;
+      $timeout = _$timeout_;
+    }));
+
+    afterEach(function() {
+      helper.clean();
+    });
+
+    beforeEach(function() {
+      var sliderConf = {
+        value: 0,
+        options: {
+          floor: 0,
+          ceil: 100,
+          vertical: true,
+          rightToLeft: true
+        }
+      };
+      helper.createSlider(sliderConf);
+    });
+    afterEach(function() {
+      // to clean document listener
+      helper.fireMouseup();
+    });
+
+    it('should handle mousedown on minH correctly when keyboardSupport is true', function() {
+      sinon.spy(helper.slider, 'calcViewDimensions');
+      sinon.spy(helper.slider, 'callOnStart');
+      sinon.spy(helper.slider, 'focusElement');
+
+      var event = helper.fireMousedown(helper.slider.minH, 0, true);
+
+      helper.slider.calcViewDimensions.called.should.be.true;
+      helper.slider.callOnStart.called.should.be.true;
+      helper.slider.focusElement.calledWith(helper.slider.minH).should.be.true;
+      event.preventDefault.called.should.be.true;
+      event.stopPropagation.called.should.be.true;
+      expect(helper.slider.tracking).to.equal('rzSliderModel');
+      expect(helper.slider.minH.hasClass('rz-active')).to.be.true;
+    });
+
+    it('should handle mousedown on minH correctly when keyboardSupport is false', function() {
+      helper.scope.slider.options.keyboardSupport = false;
+      helper.scope.$digest();
+
+      sinon.spy(helper.slider, 'calcViewDimensions');
+      sinon.spy(helper.slider, 'callOnStart');
+      sinon.spy(helper.slider, 'focusElement');
+
+      var event = helper.fireMousedown(helper.slider.minH, 0, true);
+
+      helper.slider.calcViewDimensions.called.should.be.true;
+      helper.slider.callOnStart.called.should.be.true;
+      helper.slider.focusElement.called.should.be.false;
+      event.preventDefault.called.should.be.true;
+      event.stopPropagation.called.should.be.true;
+      expect(helper.slider.tracking).to.equal('rzSliderModel');
+      expect(helper.slider.minH.hasClass('rz-active')).to.be.true;
+    });
+
+    it('should handle click and drag on minH correctly when mouse is on the middle', function() {
+      sinon.spy(helper.slider, 'positionTrackingHandle');
+      sinon.spy(helper.slider, 'callOnChange');
+      helper.fireMousedown(helper.slider.minH, 0, true);
+
+      var expectedValue = 50,
+        offset = helper.slider.sliderElem.rzsp - helper.slider.valueToOffset(expectedValue) - helper.slider.handleHalfDim;
+
+      helper.fireMousemove(offset, true);
+      expect(helper.scope.slider.value).to.equal(expectedValue);
+      helper.slider.positionTrackingHandle.called.should.be.true;
+      helper.slider.callOnChange.called.should.be.true;
+    });
+
+    it('should handle click and drag on minH correctly when mouse is before the slider and previous value was different than 0', function() {
+      helper.scope.slider.value = 50;
+      helper.scope.$digest();
+
+      sinon.spy(helper.slider, 'positionTrackingHandle');
+      var event = helper.fireMousedown(helper.slider.minH, 0, true);
+      helper.fireMousemove(-100, true);
+      expect(helper.scope.slider.value).to.equal(0);
+      helper.slider.positionTrackingHandle.called.should.be.true;
+    });
+
+    it('should handle click and drag on minH correctly when mouse is after the slider and previous value was different than 100', function() {
+      sinon.spy(helper.slider, 'positionTrackingHandle');
+      var event = helper.fireMousedown(helper.slider.minH, 0, true);
+      helper.fireMousemove(helper.slider.maxPos + 100, true);
+      expect(helper.scope.slider.value).to.equal(100);
+      helper.slider.positionTrackingHandle.called.should.be.true;
+    });
+
+    it('should call correct callbacks on slider end and keep handle focused when keyboardSupport is true', function() {
+      var event = helper.fireMousedown(helper.slider.minH, 0, true);
+
+      sinon.spy(helper.slider, 'callOnEnd');
+      sinon.spy(helper.slider.scope, '$emit');
+      helper.fireMouseup();
+
+      expect(helper.slider.tracking).to.equal('rzSliderModel');
+      expect(helper.slider.minH.hasClass('rz-active')).to.be.true;
+      helper.slider.callOnEnd.called.should.be.true;
+      helper.slider.scope.$emit.calledWith('slideEnded').should.be.true;
+    });
+
+    it('should call correct callbacks on slider end and not keep handle focused when keyboardSupport is false', function() {
+      helper.scope.slider.options.keyboardSupport = false;
+      helper.scope.$digest();
+      var event = helper.fireMousedown(helper.slider.minH, 0, true);
+
+      sinon.spy(helper.slider, 'callOnEnd');
+      sinon.spy(helper.slider.scope, '$emit');
+
+      helper.fireMouseup();
+
+      expect(helper.slider.tracking).to.equal('');
+      expect(helper.slider.minH.hasClass('rz-active')).to.be.false;
+      helper.slider.callOnEnd.called.should.be.true;
+      helper.slider.scope.$emit.calledWith('slideEnded').should.be.true;
+    });
+
+    it('should handle click on fullbar and move minH', function() {
+      sinon.spy(helper.slider, 'positionTrackingHandle');
+      sinon.spy(helper.slider, 'callOnStart');
+      sinon.spy(helper.slider, 'callOnChange');
+
+      var expectedValue = 50,
+        offset = helper.slider.sliderElem.rzsp - helper.slider.valueToOffset(expectedValue) - helper.slider.handleHalfDim;
+
+      var event = helper.fireMousedown(helper.slider.fullBar, offset, true);
+
+      expect(helper.scope.slider.value).to.equal(expectedValue);
+      expect(helper.slider.tracking).to.equal('rzSliderModel');
+      helper.slider.positionTrackingHandle.called.should.be.true;
+      helper.slider.callOnStart.called.should.be.true;
+      helper.slider.callOnChange.called.should.be.true;
+    });
+
+    it('should handle click on selbar and move minH', function() {
+      sinon.spy(helper.slider, 'positionTrackingHandle');
+      sinon.spy(helper.slider, 'callOnStart');
+      sinon.spy(helper.slider, 'callOnChange');
+
+      var expectedValue = 12,
+        offset = helper.slider.sliderElem.rzsp - helper.slider.valueToOffset(expectedValue) - helper.slider.handleHalfDim;
+
+      helper.fireMousedown(helper.slider.selBar, offset, true);
+
+      expect(helper.scope.slider.value).to.equal(expectedValue);
+      expect(helper.slider.tracking).to.equal('rzSliderModel');
+      helper.slider.positionTrackingHandle.called.should.be.true;
+      helper.slider.callOnStart.called.should.be.true;
+      helper.slider.callOnChange.called.should.be.true;
+    });
+
+    it('should handle click on ticks and move minH', function() {
+      helper.scope.slider.options.step = 10;
+      helper.scope.slider.options.showTicks = true;
+      helper.scope.$digest();
+      sinon.spy(helper.slider, 'positionTrackingHandle');
+      sinon.spy(helper.slider, 'callOnStart');
+      sinon.spy(helper.slider, 'callOnChange');
+
+      var expectedValue = 10,
+        offset = helper.slider.sliderElem.rzsp - helper.slider.valueToOffset(expectedValue) - helper.slider.handleHalfDim;
+
+      helper.fireMousedown(helper.slider.ticks, offset, true);
+
+      expect(helper.scope.slider.value).to.equal(expectedValue);
+      expect(helper.slider.tracking).to.equal('rzSliderModel');
+      helper.slider.positionTrackingHandle.called.should.be.true;
+      helper.slider.callOnStart.called.should.be.true;
+      helper.slider.callOnChange.called.should.be.true;
+    });
+  });
+
 }());
 

tests/specs/options-handling-test.js

@@ -513,4 +513,536 @@
       });
     });
   });
+
+  describe('Right to left Options handling - ', function() {
+    var helper,
+      RzSliderOptions,
+      $rootScope,
+      $timeout;
+
+    beforeEach(module('test-helper'));
+
+    beforeEach(inject(function(TestHelper, _RzSliderOptions_, _$rootScope_, _$timeout_) {
+      helper = TestHelper;
+      RzSliderOptions = _RzSliderOptions_;
+      $rootScope = _$rootScope_;
+      $timeout = _$timeout_;
+    }));
+
+    afterEach(function() {
+      helper.clean();
+    });
+
+    describe('tests with same config', function() {
+      beforeEach(function() {
+        var sliderConf = {
+          value: 10,
+          options: {
+            floor: 0,
+            ceil: 100,
+            step: 10,
+            rightToLeft: true
+          }
+        };
+        helper.createSlider(sliderConf);
+      });
+
+      it('horizontal slider should take the full width and get correct position/dimension properties', function() {
+        helper.scope.$digest();
+        expect(helper.element[0].getBoundingClientRect().width).to.equal(1000);
+        expect(helper.slider.positionProperty).to.equal('left');
+        expect(helper.slider.dimensionProperty).to.equal('width');
+        expect(helper.slider.sliderElem.hasClass('vertical')).to.be.false;
+      });
+
+      it('vertical slider should take the full height and get correct position/dimension properties', function() {
+        helper.scope.$digest();
+        helper.scope.slider.options.vertical = true;
+        helper.scope.$digest();
+        expect(helper.element[0].getBoundingClientRect().height).to.equal(1000);
+        expect(helper.slider.positionProperty).to.equal('bottom');
+        expect(helper.slider.dimensionProperty).to.equal('height');
+        expect(helper.slider.sliderElem.hasClass('vertical')).to.be.true;
+      });
+
+      it('should prevent invalid step', function() {
+        helper.scope.slider.options.step = 0;
+        helper.scope.$digest();
+        expect(helper.slider.options.step).to.equal(1);
+
+        helper.scope.slider.options.step = -1;
+        helper.scope.$digest();
+        expect(helper.slider.options.step).to.equal(1);
+      });
+
+      it('should not round value to step if enforceStep is false', function() {
+        helper.scope.slider.options.enforceStep = false;
+        helper.scope.$digest();
+
+        helper.scope.slider.value = 14;
+        helper.scope.$digest();
+        expect(helper.scope.slider.value).to.equal(14);
+      });
+
+      it('should round value to step if enforceStep is true', function() {
+        helper.scope.slider.options.enforceStep = true;
+        helper.scope.$digest();
+
+        helper.scope.slider.value = 14;
+        helper.scope.$digest();
+        expect(helper.scope.slider.value).to.equal(10);
+      });
+
+      it('should set the showTicks scope flag to true when showTicks is true', function() {
+        helper.scope.slider.options.showTicks = true;
+        helper.scope.$digest();
+        expect(helper.slider.scope.showTicks).to.be.true;
+      });
+
+      it('should set the showTicks scope flag to true when showTicksValues is true', function() {
+        helper.scope.slider.options.showTicksValues = true;
+        helper.scope.$digest();
+        expect(helper.slider.scope.showTicks).to.be.true;
+      });
+
+      it('should set not accept draggableRange to true when slider is a single one', function() {
+        helper.scope.slider.options.draggableRange = true;
+        helper.scope.$digest();
+        expect(helper.slider.options.draggableRange).to.be.false;
+      });
+
+      it('should set not accept draggableRangeOnly to true when slider is a single one', function() {
+        helper.scope.slider.options.draggableRangeOnly = true;
+        helper.scope.$digest();
+        expect(helper.slider.options.draggableRange).to.be.false;
+        expect(helper.slider.options.draggableRangeOnly).to.be.false;
+      });
+
+      it('should set correct step/floor/ceil and translate function when stepsArray is used', function() {
+        helper.scope.slider.options.stepsArray = ['A', 'B', 'C', 'D', 'E'];
+        helper.scope.$digest();
+        expect(helper.slider.options.step).to.equal(1);
+        expect(helper.slider.options.floor).to.equal(0);
+        expect(helper.slider.options.ceil).to.equal(4);
+
+        expect(helper.slider.customTrFn(0)).to.equal('A');
+        expect(helper.slider.customTrFn(2)).to.equal('C');
+      });
+
+      it('should sanitize rzSliderModel between floor and ceil', function() {
+        helper.scope.slider.options.enforceRange = true;
+        helper.scope.slider.value = 1000;
+        helper.scope.$digest();
+        expect(helper.scope.slider.value).to.equal(100);
+
+        helper.scope.slider.value = -1000;
+        helper.scope.$digest();
+        $timeout.flush(); //to flush the throttle function
+        expect(helper.scope.slider.value).to.equal(0);
+      });
+    });
+
+    describe('tests with specific config', function() {
+      it('should accept custom translate function', function() {
+        var sliderConf = {
+          value: 10,
+          options: {
+            floor: 0,
+            ceil: 100,
+            step: 10,
+            translate: function(v) {
+              return 'custom value';
+            },
+            rightToLeft: true
+          }
+        };
+        helper.createSlider(sliderConf);
+        expect(helper.slider.customTrFn(0)).to.equal('custom value');
+        expect(helper.slider.customTrFn(100)).to.equal('custom value');
+      });
+
+      it('should set maxValue to rzSliderModel if no ceil is set for a single slider', function() {
+        var sliderConf = {
+          value: 10,
+          rightToLeft: true
+        };
+        helper.createSlider(sliderConf);
+        expect(helper.slider.maxValue).to.equal(10);
+      });
+
+      it('should set maxValue to rzSliderHigh if no ceil is set for a range slider', function() {
+        var sliderConf = {
+          min: 10,
+          max: 100,
+          rightToLeft: true
+        };
+        helper.createRangeSlider(sliderConf);
+        expect(helper.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,
+            rightToLeft: true
+          }
+        };
+        helper.createSlider(sliderConf);
+        var expectedDimension = Math.floor(helper.slider.valueToOffset(8) + helper.slider.handleHalfDim);
+        expect(helper.slider.selBar[0].getBoundingClientRect().width).to.equal(expectedDimension);
+        expect(helper.slider.selBar.css('left')).to.equal(helper.slider.valueToOffset(2) + helper.slider.handleHalfDim + 'px');
+      });
+
+      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,
+            rightToLeft: true
+          }
+        };
+        helper.createSlider(sliderConf);
+        var expectedDimension = helper.slider.valueToOffset(2) + helper.slider.handleHalfDim;
+        expect(helper.slider.selBar.css('width')).to.equal(expectedDimension + 'px');
+        expect(helper.slider.selBar.css('left')).to.equal('0px');
+      });
+
+      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: 15,
+          options: {
+            floor: 0,
+            ceil: 20,
+            showSelectionBarFromValue: 10,
+            rightToLeft: true
+          }
+        };
+        helper.createSlider(sliderConf);
+        var expectedDimension = helper.slider.valueToOffset(15),
+          expectedPosition = helper.slider.valueToOffset(15) + helper.slider.handleHalfDim;
+        expect(helper.slider.selBar.css('width')).to.equal(expectedDimension + 'px');
+        expect(helper.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: 3,
+          options: {
+            floor: 0,
+            ceil: 20,
+            showSelectionBarFromValue: 10,
+            rightToLeft: true
+          }
+        };
+        helper.createSlider(sliderConf);
+        var expectedDimension = Math.floor(helper.slider.valueToOffset(13)),
+          expectedPosition = helper.slider.valueToOffset(10) + helper.slider.handleHalfDim;
+        expect(helper.slider.selBar[0].getBoundingClientRect().width).to.equal(expectedDimension);
+        expect(helper.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,
+          options: {
+            floor: 0,
+            ceil: 10,
+            showSelectionBar: true,
+            getSelectionBarColor: function(v) {
+              if (v < 5) return 'red';
+              return 'green';
+            },
+            rightToLeft: true
+          }
+        };
+        helper.createSlider(sliderConf);
+        var selBarChild = angular.element(helper.slider.selBar[0].querySelector('.rz-selection'));
+        expect(selBarChild.css('background-color')).to.equal('green');
+
+        helper.scope.slider.value = 2;
+        helper.scope.$digest();
+        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
+          },
+          rightToLeft: true
+        };
+        helper.createRangeSlider(sliderConf);
+        var expectedDimension = helper.slider.valueToOffset(6),
+          expectedPosition = helper.slider.valueToOffset(2) + helper.slider.handleHalfDim;
+        expect(helper.slider.selBar.css('width')).to.equal(expectedDimension + 'px');
+        expect(helper.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,
+          max: 8,
+          options: {
+            floor: 0,
+            ceil: 10,
+            getSelectionBarColor: function(min, max) {
+              if (max - min < 5) return 'red';
+              return 'green';
+            },
+            rightToLeft: true
+          }
+        };
+        helper.createRangeSlider(sliderConf);
+        var selBarChild = angular.element(helper.slider.selBar[0].querySelector('.rz-selection'));
+        expect(selBarChild.css('background-color')).to.equal('green');
+
+        helper.scope.slider.min = 4;
+        helper.scope.slider.max = 6;
+        helper.scope.$digest();
+        expect(selBarChild.css('background-color')).to.equal('red');
+      });
+
+      it('should call the correct callback for onStart', function() {
+        var sliderConf = {
+          value: 10,
+          options: {
+            id: 'test',
+            onStart: sinon.spy(),
+            rightToLeft: true
+          }
+        };
+        helper.createSlider(sliderConf);
+
+        helper.slider.callOnStart();
+        $timeout.flush();
+        sliderConf.options.onStart.calledWith('test').should.be.true;
+      });
+
+      it('should call the correct callback for onChange', function() {
+        var sliderConf = {
+          value: 10,
+          options: {
+            id: 'test',
+            onChange: sinon.spy(),
+            rightToLeft: true
+          }
+        };
+        helper.createSlider(sliderConf);
+
+        helper.slider.callOnChange();
+        $timeout.flush();
+        sliderConf.options.onChange.calledWith('test').should.be.true;
+      });
+
+      it('should call the correct callback for onEnd', function() {
+        var sliderConf = {
+          value: 10,
+          options: {
+            id: 'test',
+            onEnd: sinon.spy(),
+            rightToLeft: true
+          }
+        };
+        helper.createSlider(sliderConf);
+
+        helper.slider.callOnEnd();
+        $timeout.flush();
+        sliderConf.options.onEnd.calledWith('test').should.be.true;
+      });
+
+      it('should set the correct background-color on pointer for single slider', function() {
+        var sliderConf = {
+          value: 10,
+          options: {
+            floor: 0,
+            ceil: 10,
+            showSelectionBar: true,
+            getPointerColor: function(v) {
+              if (v < 5) return 'red';
+              return 'green';
+            },
+            rightToLeft: true
+          }
+        };
+        helper.createSlider(sliderConf);
+        var minHChild = angular.element(helper.slider.minH[0]);
+        expect(minHChild.css('background-color')).to.equal('green');
+
+        helper.scope.slider.value = 2;
+        helper.scope.$digest();
+        expect(minHChild.css('background-color')).to.equal('red');
+      });
+
+      it('should set the correct background-color on pointer for range slider (simple rule)', function() {
+        var sliderConf = {
+          min: 2,
+          max: 8,
+          options: {
+            floor: 0,
+            ceil: 10,
+            getPointerColor: function(v) {
+              if (v < 5) return 'red';
+              return 'green';
+            },
+            rightToLeft: true
+          }
+        };
+        helper.createRangeSlider(sliderConf);
+        var minHChild = angular.element(helper.slider.minH[0]),
+          maxHChild = angular.element(helper.slider.maxH[0]);
+        expect(minHChild.css('background-color')).to.equal('red');
+        expect(maxHChild.css('background-color')).to.equal('green');
+
+        helper.scope.slider.min = 6;
+        helper.scope.slider.max = 7;
+        helper.scope.$digest();
+        expect(minHChild.css('background-color')).to.equal('green');
+        expect(maxHChild.css('background-color')).to.equal('green');
+      });
+
+      it('should set the correct background-color on pointer for range slider (min/high independent rule 1)', function() {
+        var sliderConf = {
+          min: 2,
+          max: 8,
+          options: {
+            floor: 0,
+            ceil: 10,
+            getPointerColor: function(v, type) {
+              if (type === 'min') {
+                if (v < 5) return 'red';
+                return 'green';
+              }
+
+              if (type === 'max') {
+                if (v < 5) return 'blue';
+                return 'orange';
+              }
+            },
+            rightToLeft: true
+          }
+        };
+        helper.createRangeSlider(sliderConf);
+        var minHChild = angular.element(helper.slider.minH[0]),
+          maxHChild = angular.element(helper.slider.maxH[0]);
+        expect(minHChild.css('background-color')).to.equal('red');
+        expect(maxHChild.css('background-color')).to.equal('orange');
+
+        helper.scope.slider.min = 6;
+        helper.scope.$digest();
+        expect(minHChild.css('background-color')).to.equal('green');
+      });
+
+      it('should set the correct background-color on pointer for range slider (min/high independent rule 2)', function() {
+        var sliderConf = {
+          min: 2,
+          max: 8,
+          options: {
+            floor: 0,
+            ceil: 10,
+            getPointerColor: function(v, type) {
+              if (type === 'min') {
+                if (v < 5) return 'red';
+                return 'green';
+              }
+
+              if (type === 'max') {
+                if (v < 5) return 'blue';
+                return 'orange';
+              }
+            },
+            rightToLeft: true
+          }
+        };
+        helper.createRangeSlider(sliderConf);
+        var minHChild = angular.element(helper.slider.minH[0]),
+          maxHChild = angular.element(helper.slider.maxH[0]);
+        expect(minHChild.css('background-color')).to.equal('red');
+        expect(maxHChild.css('background-color')).to.equal('orange');
+
+        helper.scope.slider.max = 3;
+        helper.scope.$digest();
+        expect(minHChild.css('background-color')).to.equal('red');
+        expect(maxHChild.css('background-color')).to.equal('blue');
+
+      });
+    });
+
+    describe('range slider spcific - ', function() {
+      beforeEach(function() {
+        var sliderConf = {
+          min: 10,
+          max: 90,
+          options: {
+            floor: 0,
+            ceil: 100,
+            step: 10,
+            rightToLeft: true
+          }
+        };
+        helper.createRangeSlider(sliderConf);
+      });
+
+      it('should set the correct class to true when draggableRange is true', function() {
+        helper.scope.slider.options.draggableRange = true;
+        helper.scope.$digest();
+        expect(helper.slider.selBar.hasClass('rz-draggable')).to.be.true;
+      });
+
+      it('should set draggableRange to true when draggableRangeOnly is true', function() {
+        helper.scope.slider.options.draggableRangeOnly = true;
+        helper.scope.$digest();
+        expect(helper.slider.options.draggableRange).to.be.true;
+        expect(helper.slider.selBar.hasClass('rz-draggable')).to.be.true;
+      });
+
+      it('should sanitize rzSliderModel and rzSliderHigh between floor and ceil', function() {
+        helper.scope.slider.options.enforceRange = true;
+        helper.scope.slider.min = -1000;
+        helper.scope.slider.max = 1000;
+        helper.scope.$digest();
+        expect(helper.scope.slider.min).to.equal(0);
+        expect(helper.scope.slider.max).to.equal(100);
+      });
+    });
+
+    describe('options expression specific - ', function() {
+      it('should safely handle null expressions', function() {
+        var sliderConf = {
+          value: 10,
+          optionsExpression: 'thisDoesntExist'
+        };
+
+        helper.createSlider(sliderConf);
+        helper.scope.$digest();
+        expect(helper.slider.step).to.equal(1);
+      });
+
+      it('should not cause an infinite $digest loop with an expression that always returns a new object', function() {
+        var sliderConf = {
+          value: 10,
+          options: function() {
+            return {
+              floor: 1,
+              ceil: 1000
+            };
+          },
+          optionsExpression: 'slider.options()'
+        };
+
+        helper.createSlider(sliderConf);
+        helper.scope.$digest();
+        expect(helper.slider.minValue).to.equal(1);
+        expect(helper.slider.maxValue).to.equal(1000);
+      });
+    });
+  });
+
 }());

tests/specs/ticks-test.js

@@ -301,5 +301,248 @@
       expect(secondTick.attr('uib-tooltip')).to.equal('tooltip for 10');
     });
   });
+
+  describe('Right to left Ticks - ', function() {
+    var helper,
+      RzSliderOptions,
+      $rootScope,
+      $timeout;
+
+    beforeEach(module('test-helper'));
+
+    beforeEach(inject(function(TestHelper, _RzSliderOptions_, _$rootScope_, _$timeout_) {
+      helper = TestHelper;
+      RzSliderOptions = _RzSliderOptions_;
+      $rootScope = _$rootScope_;
+      $timeout = _$timeout_;
+    }));
+
+    afterEach(function() {
+      helper.clean();
+    });
+
+    it('should set selected class to ticks below the model value if showSelectionBar is true', function() {
+      var sliderConf = {
+        value: 50,
+        options: {
+          floor: 0,
+          ceil: 100,
+          step: 10,
+          showTicks: true,
+          showSelectionBar: true,
+          rightToLeft: true
+        }
+      };
+      helper.createSlider(sliderConf);
+      var firstTick = angular.element(helper.element[0].querySelectorAll('.tick')[0]);
+      expect(firstTick.hasClass('selected')).to.be.false;
+      var sixthTick = angular.element(helper.element[0].querySelectorAll('.tick')[5]);
+      expect(sixthTick.hasClass('selected')).to.be.true;
+      var seventhTick = angular.element(helper.element[0].querySelectorAll('.tick')[6]);
+      expect(seventhTick.hasClass('selected')).to.be.true;
+      var lastTick = angular.element(helper.element[0].querySelectorAll('.tick')[10]);
+      expect(lastTick.hasClass('selected')).to.be.true;
+    });
+
+    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,
+          rightToLeft: true
+        }
+      };
+      helper.createSlider(sliderConf);
+      var firstTick = angular.element(helper.element[0].querySelectorAll('.tick')[0]);
+      expect(firstTick.hasClass('selected')).to.be.true;
+      var fifthTick = angular.element(helper.element[0].querySelectorAll('.tick')[4]);
+      expect(fifthTick.hasClass('selected')).to.be.true;
+      var sixthTick = angular.element(helper.element[0].querySelectorAll('.tick')[5]);
+      expect(sixthTick.hasClass('selected')).to.be.true;
+      var seventhTick = angular.element(helper.element[0].querySelectorAll('.tick')[6]);
+      expect(seventhTick.hasClass('selected')).to.be.false;
+      var lastTick = angular.element(helper.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 right', function() {
+      var sliderConf = {
+        value: 50,
+        options: {
+          floor: 0,
+          ceil: 100,
+          step: 10,
+          showTicks: true,
+          showSelectionBarFromValue: 30,
+          rightToLeft: true
+        }
+      };
+      helper.createSlider(sliderConf);
+      var firstTick = angular.element(helper.element[0].querySelectorAll('.tick')[0]);
+      expect(firstTick.hasClass('selected')).to.be.false;
+      var thirdTick = angular.element(helper.element[0].querySelectorAll('.tick')[2]);
+      expect(thirdTick.hasClass('selected')).to.be.false;
+      var fourthTick = angular.element(helper.element[0].querySelectorAll('.tick')[3]);
+      expect(fourthTick.hasClass('selected')).to.be.false;
+      var fifthTick = angular.element(helper.element[0].querySelectorAll('.tick')[4]);
+      expect(fifthTick.hasClass('selected')).to.be.false;
+      var sixthTick = angular.element(helper.element[0].querySelectorAll('.tick')[5]);
+      expect(sixthTick.hasClass('selected')).to.be.true;
+      var seventhTick = angular.element(helper.element[0].querySelectorAll('.tick')[6]);
+      expect(seventhTick.hasClass('selected')).to.be.true;
+      var lastTick = angular.element(helper.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,
+          rightToLeft: true
+        }
+      };
+      helper.createSlider(sliderConf);
+      var firstTick = angular.element(helper.element[0].querySelectorAll('.tick')[0]);
+      expect(firstTick.hasClass('selected')).to.be.false;
+      var fifthTick = angular.element(helper.element[0].querySelectorAll('.tick')[4]);
+      expect(fifthTick.hasClass('selected')).to.be.true;
+      var sixthTick = angular.element(helper.element[0].querySelectorAll('.tick')[5]);
+      expect(sixthTick.hasClass('selected')).to.be.true;
+      var seventhTick = angular.element(helper.element[0].querySelectorAll('.tick')[6]);
+      expect(seventhTick.hasClass('selected')).to.be.false;
+      var eighthTick = angular.element(helper.element[0].querySelectorAll('.tick')[7]);
+      expect(eighthTick.hasClass('selected')).to.be.false;
+      var ninthTick = angular.element(helper.element[0].querySelectorAll('.tick')[8]);
+      expect(ninthTick.hasClass('selected')).to.be.false;
+      var lastTick = angular.element(helper.element[0].querySelectorAll('.tick')[10]);
+      expect(lastTick.hasClass('selected')).to.be.false;
+    });
+
+    it('should set the correct color to ticks when getSelectionBarColor is defined', function() {
+      var sliderConf = {
+        value: 50,
+        options: {
+          floor: 0,
+          ceil: 100,
+          step: 10,
+          showTicks: true,
+          showSelectionBar: true,
+          getSelectionBarColor: function(value) {
+            if (value <= 50)
+              return 'red';
+            else
+              return 'green';
+          },
+          rightToLeft: true
+        }
+      };
+      helper.createSlider(sliderConf);
+      var firstTick = angular.element(helper.element[0].querySelectorAll('.tick')[9]);
+      expect(firstTick.css('background-color')).to.equal('red');
+
+      helper.scope.slider.value = 100;
+      helper.scope.$digest();
+      expect(firstTick.css('background-color')).to.equal('green');
+    });
+
+    it('should set correct tooltip attributes if ticksTooltip is defined for a horizontal slider', function() {
+      var sliderConf = {
+        value: 50,
+        options: {
+          floor: 0,
+          ceil: 100,
+          step: 10,
+          showTicks: true,
+          ticksTooltip: function(value) {
+            return 'tooltip for ' + value;
+          },
+          rightToLeft: true
+        }
+      };
+      helper.createSlider(sliderConf);
+      var firstTick = angular.element(helper.element[0].querySelectorAll('.tick')[0]);
+      expect(firstTick.attr('uib-tooltip')).to.equal('tooltip for 100');
+      expect(firstTick.attr('tooltip-placement')).to.equal('top');
+      var secondTick = angular.element(helper.element[0].querySelectorAll('.tick')[1]);
+      expect(secondTick.attr('uib-tooltip')).to.equal('tooltip for 90');
+    });
+
+    it('should set correct tooltip attributes if ticksTooltip is defined for a vertical slider', function() {
+      var sliderConf = {
+        value: 50,
+        options: {
+          floor: 0,
+          ceil: 100,
+          step: 10,
+          vertical: true,
+          showTicks: true,
+          ticksTooltip: function(value) {
+            return 'tooltip for ' + value;
+          },
+          rightToLeft: true
+        }
+      };
+      helper.createSlider(sliderConf);
+      var firstTick = angular.element(helper.element[0].querySelectorAll('.tick')[0]);
+      expect(firstTick.attr('uib-tooltip')).to.equal('tooltip for 100');
+      expect(firstTick.attr('tooltip-placement')).to.equal('right');
+      var secondTick = angular.element(helper.element[0].querySelectorAll('.tick')[1]);
+      expect(secondTick.attr('uib-tooltip')).to.equal('tooltip for 90');
+    });
+
+    it('should set correct tooltip attributes on tick-value if ticksValuesTooltip is defined for a horizontal slider', function() {
+      var sliderConf = {
+        value: 50,
+        options: {
+          floor: 0,
+          ceil: 100,
+          step: 10,
+          showTicksValues: true,
+          ticksValuesTooltip: function(value) {
+            return 'tooltip for ' + value;
+          },
+          rightToLeft: true
+        }
+      };
+      helper.createSlider(sliderConf);
+      var firstTick = angular.element(helper.element[0].querySelectorAll('.tick-value')[0]);
+      expect(firstTick.attr('uib-tooltip')).to.equal('tooltip for 100');
+      expect(firstTick.attr('tooltip-placement')).to.equal('top');
+      var secondTick = angular.element(helper.element[0].querySelectorAll('.tick-value')[1]);
+      expect(secondTick.attr('uib-tooltip')).to.equal('tooltip for 90');
+    });
+
+    it('should set correct tooltip attributes on tick-value if ticksValuesTooltip is defined for a vertical slider', function() {
+      var sliderConf = {
+        value: 50,
+        options: {
+          floor: 0,
+          ceil: 100,
+          step: 10,
+          vertical: true,
+          showTicksValues: true,
+          ticksValuesTooltip: function(value) {
+            return 'tooltip for ' + value;
+          },
+          rightToLeft: true
+        }
+      };
+      helper.createSlider(sliderConf);
+      var firstTick = angular.element(helper.element[0].querySelectorAll('.tick-value')[0]);
+      expect(firstTick.attr('uib-tooltip')).to.equal('tooltip for 100');
+      expect(firstTick.attr('tooltip-placement')).to.equal('right');
+      var secondTick = angular.element(helper.element[0].querySelectorAll('.tick-value')[1]);
+      expect(secondTick.attr('uib-tooltip')).to.equal('tooltip for 90');
+    });
+  });
+
 }());