fix(range): improved rtl support (#17479)

* fix(Range): rtl support

* fix(Range): knob position in rtl

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;