fix(slider-rtl): added rtl support for slider

- added bidi-property function to set a property by direction
- fixed slider in rtl

Closes #7434

Author: EladBezalel

src/components/slider/slider.js

@@ -27,6 +27,7 @@ function SliderContainerDirective() {
     controller: function () {},
     compile: function (elem) {
       var slider = elem.find('md-slider');
+
       if (!slider) {
         return;
       }
@@ -457,7 +458,13 @@ function SliderDirective($$rAF, $window, $mdAria, $mdUtil, $mdConstant, $mdThemi
       var thumbPosition = (percent * 100) + '%';
       var activeTrackPercent = invert ? (1 - percent) * 100 + '%' : thumbPosition;
 
-      thumbContainer.css(vertical ? 'bottom' : 'left', thumbPosition);
+      if (vertical) {
+        thumbContainer.css('bottom', thumbPosition);
+      }
+      else {
+        $mdUtil.bidiProperty(thumbContainer, 'left', 'right', thumbPosition);
+      }
+
 
       activeTrack.css(vertical ? 'height' : 'width', activeTrackPercent);
 
@@ -563,6 +570,10 @@ function SliderDirective($$rAF, $window, $mdAria, $mdUtil, $mdConstant, $mdThemi
       var size = vertical ? sliderDimensions.height : sliderDimensions.width;
       var calc = (position - offset) / size;
 
+      if (!vertical && $mdUtil.bidi() === 'rtl') {
+        calc = 1 - calc;
+      }
+
       return Math.max(0, Math.min(1, vertical ? 1 - calc : calc));
     }
 

src/components/slider/slider.scss

@@ -64,7 +64,7 @@ $slider-sign-top: ($slider-size / 2) - ($slider-thumb-default-scale * $slider-th
 
 @mixin slider-thumb-position($width: $slider-thumb-width, $height: $slider-thumb-height) {
   position: absolute;
-  left: -$width / 2;
+  @include rtl-prop(left, right, (-$width / 2));
   top: ($slider-size / 2) - ($height / 2);
   width: $width;
   height: $height;
@@ -133,11 +133,11 @@ md-slider {
    */
   ._md-thumb-container {
     position: absolute;
-    left: 0;
+    @include rtl-prop(left, right, 0);
     top: 50%;
     transform: translate3d(-50%,-50%,0);
     transition: all .4s cubic-bezier(.25,.8,.25,1);
-    transition-property: left, bottom;
+    transition-property: left, right, bottom;
   }
   ._md-thumb {
     z-index: 1;
@@ -184,7 +184,7 @@ md-slider {
     &:after {
       position: absolute;
       content: '';
-      left: -($slider-sign-width / 2 - $slider-arrow-width / 2);
+      @include rtl-prop(left, right, -($slider-sign-width / 2 - $slider-arrow-width / 2));
       border-radius: $slider-arrow-height;
       top: 19px;
       border-left: $slider-arrow-width / 2 solid transparent;
@@ -427,8 +427,8 @@ md-slider {
   }
   &[md-invert] {
     &:not([md-vertical]) ._md-track-fill {
-      left: auto;
-      right: 0;
+      @include rtl-prop(left, right, auto);
+      @include rtl-prop(right, left, 0);
     }
     &[md-vertical] {
       ._md-track-fill {
@@ -460,11 +460,11 @@ md-slider-container {
   }
 
   & > *:first-child:not(md-slider) {
-    margin-right: $items-margin;
+    @include rtl-prop(margin-right, margin-left, $items-margin);
   }
 
   & > *:last-child:not(md-slider) {
-    margin-left: $items-margin;
+    @include rtl-prop(margin-left, margin-right, $items-margin);
   }
 
   &[md-vertical] {
@@ -481,7 +481,7 @@ md-slider-container {
   md-input-container {
     input[type="number"] {
       text-align: center;
-      padding-left: 15px; // size of arrows
+      @include rtl-prop(padding-left, padding-right, 15px); // size of arrows
       height: $items-height * 2;
       margin-top: -$items-height;
     }

src/core/util/util.js

@@ -43,6 +43,20 @@ function UtilFactory($document, $timeout, $compile, $rootScope, $$mdAnimate, $in
     return hasValue;
   };
 
+  function validateCssValue(value) {
+    return !value       ? '0'   :
+      hasPx(value) || hasPercent(value) ? value : value + 'px';
+  }
+
+  function hasPx(value) {
+    return String(value).indexOf('px') > -1;
+  }
+
+  function hasPercent(value) {
+    return String(value).indexOf('%') > -1;
+
+  }
+
   var $mdUtil = {
     dom: {},
     now: window.performance ?
@@ -61,22 +75,29 @@ function UtilFactory($document, $timeout, $compile, $rootScope, $$mdAnimate, $in
       if ( arguments.length == 0 ) return ltr ? 'ltr' : 'rtl';
 
       // If mutator
+      var elem = angular.element(element);
+
       if ( ltr && angular.isDefined(lValue)) {
-        angular.element(element).css(property, validate(lValue));
+        elem.css(property, validateCssValue(lValue));
       }
       else if ( !ltr && angular.isDefined(rValue)) {
-        angular.element(element).css(property, validate(rValue) );
+        elem.css(property, validateCssValue(rValue) );
       }
+    },
 
-        // Internal utils
+    bidiProperty: function (element, lProperty, rProperty, value) {
+      var ltr = !($document[0].dir == 'rtl' || $document[0].body.dir == 'rtl');
 
-        function validate(value) {
-          return !value       ? '0'   :
-                 hasPx(value) ? value : value + 'px';
-        }
-        function hasPx(value) {
-          return String(value).indexOf('px') > -1;
-        }
+      var elem = angular.element(element);
+
+      if ( ltr && angular.isDefined(lProperty)) {
+        elem.css(lProperty, validateCssValue(value));
+        elem.css(rProperty, '');
+      }
+      else if ( !ltr && angular.isDefined(rProperty)) {
+        elem.css(rProperty, validateCssValue(value) );
+        elem.css(lProperty, '');
+      }
     },
 
     clientRect: function(element, offsetParent, isOffsetRect) {