离子 RTL - 滑块上方向错误的离子范围

Question

我正在尝试在 Ionic 3+ 上使用RTL支持，但在使用ion-range组件时发现了问题。

对于我所有的应用程序，我设置了$app-direction: rtl; 在variable.scss文件中，有时我需要在 HTML 文件中添加dir="rtl" 。

但是在ion-range组件中，尽管以正确的方向显示，滑块的操作仍然是LTR。 如下图所示：

在第一个图像中，旋钮位于正确的位置，但它不再工作（它不会移动），并且可以意识到滑块从错误的一侧（左侧）开始。 最后一张图片，很明显滑块一直在 LTR 方向上工作。

我的代码：

<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>

有没有办法设置滑块方向？

Answer 1

ionic 团队仍在致力于为所有组件提供完整的 RTL 支持。 他们还没有解决这个问题。

临时解决方案：

我刚刚找到了临时解决方案。 您可以通过在<ion-range>标签中添加dir="ltr"来使其在 RTL 中工作，而不是在 RTL 中完全中断范围滑块。 这将在 LTR 方向显示范围滑块，它会正常工作。

我正在密切关注离子团队的解决方案，一旦解决将更新答案。

Answer 2

我正在尝试在 Ionic 3+ 上使用RTL支持，但在使用ion-range组件时发现了问题。

对于我所有的应用程序，我设置了$app-direction: rtl; 在variable.scss文件中，有时我需要在 HTML 文件中添加dir="rtl" 。

但是在ion-range组件中，尽管以正确的方向显示，滑块的操作仍然是LTR。 如下图所示：

在第一个图像中，旋钮位于正确的位置，但它不再起作用（它不会移动），并且可以意识到滑块从错误的一侧（左侧）开始。 最后一张图片，很明显滑块一直在 LTR 方向上工作。

我的代码：

<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>

有没有办法设置滑块方向？