如何设置`ion-range`的最大值？

提问于 2024-04-26T08:00:26+08:00

浏览次

0

我有以下ion-range组件。

我将最小值和最大值分别设置为0和120。

但是我也希望将拇指的移动限制在比120(上限)更低的值，例如：85但保持先前的限制：0和120。

<ion-list>
    <ion-item>
        <ion-range min="0" max="120" pin="true" [(ngModel)]="myValue"></ion-range>
    </ion-item>
</ion-list>

例：

在此输入图像描述

有关如何实现这一点的任何想法？

谢谢！

1 回答

0
我遇到过同样的问题并快速修复！

您可以将ionChange事件添加到ion-range组件并调用函数来更新范围的当前值。这将在每次更改范围值时触发该函数，但仅在匹配逻辑语句时更改当前值。

重要：有趣的是，对于单个旋钮范围，您还需要将debounce属性设置为正非零数字(默认值为 0)。这告诉 Ionic 在触发ionChange事件之前应该等待多长时间。当debounce = 0 时，分配给保持值(i.e .myValue)的变量的值会在调用函数时发生变化，但是，仅对单个旋钮范围不会发生范围位置的视觉变化(双旋钮工作正常)范围)。这是 Ionic 团队应该研究的一个错误。

例如，在.html文件中添加ionChange事件和debounce属性：
```
<ion-range min="0" max="120" pin="true" [(ngModel)]="myValue" (ionChange)="restrictValue()" debounce="1"></ion-range>
```
并在.ts文件中添加一个函数restrictValue()(在本例中为restrictValue())：
```
restrictValue () {
  if (this.myValue >= 85) {
    this.myValue = 85;
  }
}
```
希望这可以帮助！
回复于 2024-04-26T08:00:26+08:00

相关问题