bug: range does not work when document is rtl but component is forced to ltr

[ashishgehlot]

Hello Devs,

I was trying to use ion-slider for RTL application but its not working as expected. In LTR mode its working fine. In RTL mode, Knob gets stick in right side and can not change by dragging also value change appears in reverse mode like Dragging from Right to left but animate from left to right.

Here I am adding Codepen project to where I reproduced this issue. Hope it will help you to understand issue.
[https://codepen.io/ashishgehlot95/pen/RwNBbpr?editors=1010]

[brandyscarney]

Thanks for the issue! The codepen you added is using a very old version of Ionic, please make sure you're using latest, which is 4.11.8 at the time of this writing. Also, I believe you need to add the dir on the html element: https://codepen.io/brandyscarney/pen/gObjgzK?editors=1010

@abennouna could you confirm this?

[abennouna]

The range issue has been solved in a previous version of Ionic (4.0.2).

I understand that the pen demonstrates an issue when using the dir=rtl on the ion-range element itself.

As a matter of fact, the RTL fix involved checking the direction on the document itself, and does not account for other parent elements, or the slider itself.

So if this is a mixed-direction document, that may be an issue.

[ashishgehlot]

Yes, I am using mixed-direction.

If I remove dir attribute from ion-range works fine but with attribute it breaks .

https://codepen.io/ashishgehlot95/pen/mdyajMd?editors=1010

[ashishgehlot]

Any update on this issue ?

[FahmiChaar]

Any option to force component direction to LTR when my app direction is RTL ?

[3zzy]

Its still broken :(

[sean-perkins]

Hello everyone 👋 this has been fixed in #24597 and will be available in the next release of Ionic.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.