If you're facing the same issue, I have a simple solution that may work for you!
Simply include the ionChange event in your ion-range component and create a function to update the range's value. This function will be triggered every time the range value is modified, but it will only update the value if certain conditions are met.
IMPORTANT: It's worth noting that for single knob ranges, you'll need to specify a debounce attribute with a positive nonzero number (as opposed to the default 0). This setting determines how long Ionic should wait before triggering the ionChange event. When debounce is set to 0, the variable holding the value (myValue) gets updated when the function is called, but visual changes to the range position won't occur for single knob ranges (dual knob ranges work fine). This seems to be a bug that the Ionic team should address.
As an example, add the ionChange event and the debounce attribute in your .html file:
<ion-range min="0" max="120" pin="true" [(ngModel)]="myValue" (ionChange)="restrictValue()" debounce="1"></ion-range>
Then, include a function like restrictValue() in your .ts file:
restrictValue () {
if (this.myValue >= 85) {
this.myValue = 85;
}
}
I hope you find this helpful!