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

Question

我有以下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>

例：

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

谢谢！

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

希望这可以帮助！