[Ionic 5] Can't bind ion-range value with ngModel

I’m trying to bind the ion-range value with the default [(ngModel)], but it doesn’t seem to be possible. I declared the rangevalue as a number, as mentioned in documentation. I see that someone already managed to do this with Ionic 5 (¹) (²) (³), but I can’t find any difference with my method.

I’m using Ionic v5 with Angular 10.

What I tried to do:

HTML FIRST TRY

<ion-range min="0" max="1" step="0.05" (ionChange)="change()" [(ngModel)]="rangeValue">
	<ion-icon size="small" slot="start" name="sunny"></ion-icon>
    <ion-icon slot="end" name="sunny"></ion-icon>
</ion-range>

HTML SECOND TRY

<ion-range min="0" max="1" step="0.05" (ionChange)="change()" [value]="rangeValue">
	<ion-icon size="small" slot="start" name="sunny"></ion-icon>
    <ion-icon slot="end" name="sunny"></ion-icon>
</ion-range>

TypeScript

private rangeValue: number;

change() {
	console.log('rangeValue: ', rangeValue);
}

1 post - 1 participant

Read full topic