Rangesliders [snaps] value from Typescript class causing a bug

Hello, I ran into an issue and I don’t really have a clue what is causing this.

So I got a Rangeslider where I included snaps + step.

My HTML code looks like this. [I’ve shorten the code to the minimum in this example]

<ion-range dualKnobs="true" min={{minRange}} max={{maxRange}} snaps={{snapsActive}} [(ngModel)]="range" step={{stepRange}}></ion-range>

The Values work perfectly with the typescript classes so don’t worry about that.

This is how they look like in the TS:

    stepRange: number;
    maxRange: number;
    minRange: number;
    snapsActive: boolean;

But the issue what I am running into is this:


The correct way of how it should look like is this:


I can only achieve this fix when I change the HTML code from above to this:

<ion-range dualKnobs="true" min="0" max="1000" snaps="true" [(ngModel)]="range" step="true"></ion-range>

I hope someone can help me with this bug.
Thanks already for any input! :bird::grin:

Any idea ? :slight_smile:

Hi, try change your code to this:

<ion-range dualKnobs=“true” [min]=“minRange” [max]=“maxRange” [snaps]=“snapsActive” [(ngModel)]=“range” [step]=“stepRange”>

Thanks for the input!

That fixed a small bug on the left and the performance! But the snaps still aren’t appearing.


I believe that you should initialize that parameters with any values. Like this:

private minRange:number = 12;
private maxRange:number = 97;
private snapsActive:boolean = true;
private stepRange:number = 6;

Here it works fine.

Same bug appears sadly. :disappointed_relieved: