RTL support for Slider

diff --git a/js/foundation.slider.js b/js/foundation.slider.js
index da55a5c455de873545634b4b277709534c838326..c24723faf0ca94cb199eea99dbed2aaeab24317d 100644 (file)
--- a/js/foundation.slider.js
+++ b/js/foundation.slider.js
@@ -165,7 +165,6 @@
       this.options.doubleSided = true;
       this.$handle2 = this.handles.eq(1);
       this.$input2 = this.inputs.length ? this.inputs.eq(1) : $('#' + this.$handle2.attr('aria-controls'));
-
       if(!this.inputs[1]){
         this.inputs = this.inputs.add(this.$input2);
       }
@@ -237,8 +236,8 @@
 
       if(isLeftHndl){
         css[lOrT] = (pctOfBar > 0 ? pctOfBar * 100 : 0) + '%';//
-        dim = /*Math.abs*/((percent(this.$handle2.position()[lOrT] + halfOfHandle, elemDim) - parseFloat(pctOfBar)) * 100).toFixed(this.options.decimal) + '%';
-        css['min-' + hOrW] = dim;
+        dim = ((this.$handle2.attr('aria-valuenow') - this.$handle.attr('aria-valuenow')) / this.options.end) * 100;
+        css['min-' + hOrW] = dim + '%';
         if(cb && typeof cb === 'function'){ cb(); }
       }else{
         var handleLeft = parseFloat(this.$handle[0].style.left);
@@ -328,6 +327,8 @@
           // eleDim = this.$element[0].getBoundingClientRect()[param],
           offsetPct = percent(barXY, barDim);
       value = (this.options.end - this.options.start) * offsetPct;
+      // turn everything around for RTL
+      if (Foundation.rtl() && !this.options.vertical) {value = this.options.end - value;}
       hasVal = false;
 
       if(!$handle){//figure out which handle it is, pass it to the next function.

diff --git a/scss/components/_slider.scss b/scss/components/_slider.scss
index 3f2d7d3c423eb9c67534cf6ad6d43b7b2136f301..ba34a05a3f2a289b79406051989d2b3ef61aaa42 100644 (file)
--- a/scss/components/_slider.scss
+++ b/scss/components/_slider.scss
@@ -155,4 +155,9 @@ $slider-transition: all 0.2s ease-in-out !default;
   .slider.vertical {
     @include slider-vertical;
   }
+
+  // RTL support
+  html[dir="rtl"] .slider:not(.vertical){
+    transform: scale(-1, 1);
+  }
 }