4

I'm trying to use the RTL support on Ionic 3+, but I have found issues when using the ion-range component.

For all my app, I setted $app-direction: rtl; in the variable.scss file, and at some points I needed to add dir="rtl" in the HTML files.

But in the ion-range component, despite displaying with the correct direction, the operation of the slider remains LTR. As it's shown at images below:

enter image description here

enter image description here

At first image, the knob is on the right place, but it doesn't work anymore (it doesn't move), and it's possible to realize that the slider starts on the wrong side (on the left). And at last image, it's clear that the slider keeps working on the LTR direction.

My code:

<ion-footer no-shadow dir="rtl">
  <ion-toolbar position="bottom">
      <ion-row>
        <ion-col width-33 text-right class="label-range">
            מרחק: <ion-badge item-end>עד {{ distancia }} ק"מ</ion-badge>
        </ion-col>
      </ion-row>
      <ion-range min="10" max="100" step="10" snaps="true" color="secondary" [(ngModel)]="distancia">
            <ion-label class="label-range" range-left>10 ק"מ</ion-label>
            <ion-label class="label-range" range-right>100 ק"מ</ion-label>
      </ion-range>
  </ion-toolbar>
</ion-footer>

Is there any manner to set the slider direction?

Atoyansk
  • 233
  • 5
  • 20

1 Answers1

0

The ionic team is yet working on full RTL support for all components. They have not yet resolved this issue.

Temporary Solution:

I have just found the temporary solution for this. Instead of range slider breaks completely in RTL, you can make it work in RTL by adding dir="ltr" in <ion-range> tag. This will display range slider in LTR direction and it will work properly.

I am closely following the ionic team for its solution, will update answer once it's resolved.

Dhiren Patel
  • 127
  • 5
  • Yes, I did it. At least it is working. But do you know if there was any evolution about this feature with RTL? – Atoyansk Jun 28 '18 at 09:56
  • I am keeping my eye on an issue in Github but have not yet found any solution yet. https://github.com/IonDen/ion.rangeSlider/issues/494 Just found a similar workaround from comments on Github maybe this could help. http://jsfiddle.net/IonDen/gbmszmp4/ – Dhiren Patel Jun 28 '18 at 10:48
  • Quite surprised they don't have explicit right-to-left support. I think for our project we'll switch to the `ng5-slider` package which has explicit support for RTL sliders (see their demo page https://angular-slider.github.io/ng5-slider/demos). – Harry Jun 09 '20 at 15:16