How to set a maximum value for `ion-range`?

问题

I have the following ion-range component.

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

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>

Example:

Any idea on how to achieve this?

Thanks!

回答1:

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

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.

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.

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>

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

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

Hope this helps!

来源：https://stackoverflow.com/questions/48727039/how-to-set-a-maximum-value-for-ion-range