diff --git a/core/src/components/range/range.tsx b/core/src/components/range/range.tsx
index ee19212c09..76ade963ab 100644
--- a/core/src/components/range/range.tsx
+++ b/core/src/components/range/range.tsx
@@ -3,6 +3,7 @@ import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop
import { getIonMode } from '../../global/ionic-global';
import { Color, Gesture, GestureDetail, KnobName, RangeChangeEventDetail, RangeValue, StyleEventDetail } from '../../interface';
import { clamp, debounceEvent, getAriaLabel, inheritAttributes, renderHiddenInput } from '../../utils/helpers';
+import { isRTL } from '../../utils/rtl';
import { createColorClasses, hostContext } from '../../utils/theme';
import { PinFormatter } from './range-interface';
@@ -290,13 +291,13 @@ export class Range implements ComponentInterface {
// figure out which knob they started closer to
let ratio = clamp(0, (currentX - rect.left) / rect.width, 1);
- if (document.dir === 'rtl') {
+ if (isRTL(this.el)) {
ratio = 1 - ratio;
}
this.pressedKnob =
!this.dualKnobs ||
- Math.abs(this.ratioA - ratio) < Math.abs(this.ratioB - ratio)
+ Math.abs(this.ratioA - ratio) < Math.abs(this.ratioB - ratio)
? 'A'
: 'B';
@@ -320,7 +321,7 @@ export class Range implements ComponentInterface {
// update the knob being interacted with
const rect = this.rect;
let ratio = clamp(0, (currentX - rect.left) / rect.width, 1);
- if (document.dir === 'rtl') {
+ if (isRTL(this.el)) {
ratio = 1 - ratio;
}
@@ -384,9 +385,9 @@ export class Range implements ComponentInterface {
this.value = !this.dualKnobs
? valA
: {
- lower: Math.min(valA, valB),
- upper: Math.max(valA, valB)
- };
+ lower: Math.min(valA, valB),
+ upper: Math.max(valA, valB)
+ };
this.noUpdate = false;
}
@@ -432,10 +433,10 @@ export class Range implements ComponentInterface {
const barStart = `${ratioLower * 100}%`;
const barEnd = `${100 - ratioUpper * 100}%`;
- const doc = document;
- const isRTL = doc.dir === 'rtl';
- const start = isRTL ? 'right' : 'left';
- const end = isRTL ? 'left' : 'right';
+ const rtl = isRTL(this.el);
+
+ const start = rtl ? 'right' : 'left';
+ const end = rtl ? 'left' : 'right';
const tickStyle = (tick: any) => {
return {
@@ -502,7 +503,7 @@ export class Range implements ComponentInterface {
part="bar-active"
/>
- { renderKnob(isRTL, {
+ {renderKnob(rtl, {
knob: 'A',
pressed: pressedKnob === 'A',
value: this.valA,
@@ -516,7 +517,7 @@ export class Range implements ComponentInterface {
labelText
})}
- { this.dualKnobs && renderKnob(isRTL, {
+ {this.dualKnobs && renderKnob(rtl, {
knob: 'B',
pressed: pressedKnob === 'B',
value: this.valB,
diff --git a/core/src/components/range/test/rtl/e2e.ts b/core/src/components/range/test/rtl/e2e.ts
new file mode 100644
index 0000000000..3997035532
--- /dev/null
+++ b/core/src/components/range/test/rtl/e2e.ts
@@ -0,0 +1,10 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+test('range: RTL', async () => {
+ const page = await newE2EPage({
+ url: '/src/components/range/test/rtl?ionic:_testing=true'
+ });
+
+ const compare = await page.compareScreenshot();
+ expect(compare).toMatchScreenshot();
+});
diff --git a/core/src/components/range/test/rtl/index.html b/core/src/components/range/test/rtl/index.html
new file mode 100644
index 0000000000..a761de7f70
--- /dev/null
+++ b/core/src/components/range/test/rtl/index.html
@@ -0,0 +1,43 @@
+
+
+
+
+
+ Range - RTL
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Range - RTL
+
+
+
+
+
+
+
+
+ Range
+
+
+
+
+
+
+
+
+
+
+
+
+