[SOLVED] Ion-range values not updated


I’ve got following ion-range

<ion-range dualKnobs="true" [(ngModel)]="ages" min="18" max="99" debounce="500" pin="true" (ionChange)="onAgeChange($event)"></ion-range>

ages is created like this in my class

ages: any = {
    lower: 18,
    upper: 99

when I set a new value in ngAfterViewInit (for example)

ngAfterViewInit():void {
     this.ages.lower = 37;

this value isn’t reflected in my display, I stil see 18 as current selected minimal value.

anyone face or did face the same problem? do I make something’s wrong? could/should I call a refresh or something like that?


Facing the same problem Did you find a solution for this?


thx for your reply @florianbepunkt because of this I had a look again and just found my mistake and solve the issue. Hope it’s the same for you.

In my case the initialization wasn’t working because I was doing:

ngAfterViewInit():void {
   this.ages.lower = 37;
   this.ages.upper = 68;

where it has to be done like following:

ngAfterViewInit():void {
   this.ages = {lower: 37, upper: 68};



Thanks. I’m not sure if I understand it correctly: If i use the normal range slider, I don’t have to use ngAfterViewInit(). But with the dualKnob I have to? Since my slider returns null.


No you don’t have too, that’s my case.

What’s important is that my mistake was by the way I initialized the value, I had to create a new object to reflect the change to the display.


Thanks. This helped me to solve my case as well. I was passing an empty string ‘’ as default value.