如何设置“离子范围"的最大值? [英] How to set a maximum value for `ion-range`?

问题描述

我有以下 ion-range 组件.

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

I set the minimum and maximum values to 0 and 120 respectively.

但是我也想将拇指的移动限制为小于 120 (上限)的值，例如: 85 ，但保持先前的限制:<代码> 0 和 120 .

But also I want to restrict the movement of the thumb to a lower value than 120 (upper limit), for example: 85 but keeping the previous limits: 0 and 120.

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

示例:

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

Any idea on how to achieve this?

谢谢！

推荐答案

我也遇到了同样的问题，并且有快速解决方法！

I had encountered this same issue and have a quick fix!

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

You can add the ionChange event to the ion-range component and call a function to update the range's current value. This will fire the function every time the range value is changed but only changes the current value when a logical statement is matched.

重要:有趣的是，对于单旋钮范围，您还需要将 debounce 属性设置为正非零数字(默认是0).这表明Ionic在触发 ionChange 事件之前应等待多长时间.当 debounce = 0时，分配给保存该值的变量的值(即 myValue )在调用函数时会更改，但是，对范围位置的视觉更改不会仅在单旋钮范围内发生(与双旋钮范围一起正常工作).这是Ionic小组应该研究的错误.

IMPORTANT: Interestingly, for single knob ranges, you will also need to set the debounce attribute to a positive nonzero number (the default is 0). This tells how long Ionic should wait before firing the ionChange event. When debounce = 0, the value assigned to the variable that holds the value (i.e. myValue) changes when a function is called, however, visual changes to the range position will not occur for only single knob ranges (it works fine with dual knob ranges). This is a bug the Ionic team should look into.

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

For example, add the ionChange event and debounce attribute in your .html file:

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

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

and add a function, restrictValue() in this case, in your .ts file:

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

希望这会有所帮助！

这篇关于如何设置“离子范围"的最大值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！