如何为“离子范围”设置最大值？答案

【问题标题】：How to set a maximum value for `ion-range`?如何为“离子范围”设置最大值？
【发布时间】：2018-07-21 11:25:07
【问题描述】：

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

例子：

知道如何实现这一目标吗？

谢谢！

【问题讨论】：

标签： angular typescript ionic-framework ionic2 ionic3

【解决方案1】：

我也遇到过同样的问题，已经快速解决了！

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

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

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

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

并在您的.ts 文件中添加一个函数，在这种情况下为restrictValue()：

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

希望这会有所帮助！

【讨论】：