更改离子范围滑块的方向

Question

我想利用离子范围滑块在星（评级）上创建一个滤镜。

因此，用户可以从0-5进行过滤，但由于用户将从选定的速率及以上的速率进行过滤，因此希望更改范围滑块的方向。

因此想从左向右滑动。这表示用户将在0到3.3之间进行搜索，但希望翻转指示的绿线。

在这种情况下，我们从3.3及更高版本进行搜索。有人可以帮我这个忙吗？

这是html：

<ion-range min="0" max="5" value="5" step="0.1" snaps="true" mode="md" color="secondary"
   [(ngModel)]="rating" (ngModelChange)="ratingFilter($event)">

   <ion-icon size="small" slot="start" name="star"></ion-icon>
   <ion-icon slot="end" name="star"></ion-icon>
</ion-range>

和ratingFilter()：

ratingFilter(rating) {
    console.log(rating);
    this.rating = Math.round( rating * 10 ) / 10;
    rating === 0 ? this.showAll = true : this.showAll = false;
}

Answer 1

文档没有提供任何方法来反转范围滑块的方向。

一种快速的方法是将滑块转换为180度，从而将其反转，从而使其从左向右移动。

您可以将以下CSS添加到滑块。我尚未对其进行测试，但希望它看起来像这样：

<ion-range min="0" style="transform: rotate(180deg);"  max="5" value="5" step="0.1" snaps="true" mode="md" color="secondary"
   [(ngModel)]="rating" (ngModelChange)="ratingFilter($event)">

   <ion-icon size="small" slot="start" name="star"></ion-icon>
   <ion-icon slot="end" name="star"></ion-icon>
</ion-range>