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

Question

我有以下ion-range组件。

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

但我也希望将拇指的移动限制在比120（上限）更低的值，例如：85，但保留以前的限制：0和{ {1}}。

120

示例：

关于如何实现这一目标的任何想法？

谢谢！

Answer 1

我遇到了同样的问题并快速解决了问题！

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

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

例如，在ionChange文件中添加debounce事件和.html属性：

<ion-range min="0" max="120" pin="true" [(ngModel)]="myValue" (ionChange)="restrictValue()" debounce="1"></ion-range>

并在restrictValue()文件中添加一个函数.ts：

restrictValue () {
  if (this.myValue >= 85) {
    this.myValue = 85;
  }
}

希望这有帮助！