From f832de5f4ac1e7db5a2a1c48ca7b85ad7ef671b5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bengt=20Wei=C3=9Fe?= <bengtler@gmail.com>
Date: Wed, 13 Feb 2019 14:17:42 +0100
Subject: [PATCH] fix(range): improved rtl support (#17479)

* fix(Range): rtl support

* fix(Range): knob position in rtl
---
 core/src/components/range/range.tsx | 23 ++++++++++++-----------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/core/src/components/range/range.tsx b/core/src/components/range/range.tsx
index 56c4c3841a..93ffb901d1 100644
--- a/core/src/components/range/range.tsx
+++ b/core/src/components/range/range.tsx
@@ -384,25 +384,27 @@ export class Range implements ComponentInterface {
     const { min, max, neutralPoint, ratioLower, ratioUpper } = this;
     const neutralPointRatio = valueToRatio(neutralPoint, min, max);
 
+    const isRTL = document.dir === 'rtl';
+    const start = isRTL ? 'right' : 'left';
+    const end = isRTL ? 'left' : 'right';
+    const style: any = {};
+
     // dual knob handling
-    let left = `${ratioLower * 100}%`;
-    let right = `${100 - ratioUpper * 100}%`;
+    style[start] = `${ratioLower * 100}%`;
+    style[end] = `${100 - ratioUpper * 100}%`;
 
     // single knob handling
     if (!this.dualKnobs) {
       if (this.ratioA < neutralPointRatio) {
-        right = `${neutralPointRatio * 100}%`;
-        left = `${this.ratioA * 100}%`;
+        style[end] = `${neutralPointRatio * 100}%`;
+        style[start] = `${this.ratioA * 100}%`;
       } else {
-        right = `${100 - this.ratioA * 100}%`;
-        left = `${neutralPointRatio * 100}%`;
+        style[end] = `${100 - this.ratioA * 100}%`;
+        style[start] = `${neutralPointRatio * 100}%`;
       }
     }
 
-    return {
-      left,
-      right
-    };
+    return style;
   }
 
   protected isTickActive(stepRatio: number) {
@@ -537,7 +539,6 @@ function renderKnob({ knob, value, ratio, min, max, neutralPoint, disabled, pres
 
   const knobStyle = () => {
     const style: any = {};
-
     style[start] = `${ratio * 100}%`;
 
     return style;