Problem with ion-range

I was making a size selector for the app text and I thought a slider might help me.

I started reading the documentation and when I finished adding the slider, I found the following problem:

Whenever y tap or change the slider value, the console logs a bunch of 0s and 1s or 2s and NaNs… Making the slider non functional…

To test this, I’m building and running in an android device.

Here’s a gif of the slider

Codes:

HTML:

<ion-content>
<ion-item>
	<ion-label [ngClass]="size">Hello World</ion-label>
</ion-item>
<ion-item>
	<ion-range min="0" max="2" step="1" knobs="true" (ionChange)="changeLetterSize(size)" [(ngModel)]="size" snaps="true"></ion-range>
</ion-item>
</ion-content>

TYPESCRIPT:

changeLetterSize(size){
	switch (size) {
		case 0:
			this.size="txpeque"
			break;
		case 1:
			this.size="txnormal"
			break;
		case 2:
			this.size="txgrande"
			break;
	}
	console.log(size); 
}

These two are fighting with each other on the content of this.size. Use either one of them, not both or change “changeletterSize” not to be affecting the content of this.size.

So I fixed by adding another variable and renaming things.

Added sizeName:any below constructor.

Changed this.size to this.sizeName in changeLetterSize function.

Changed size to sizeName in ngClass in HTML file.

Nice rethinking

Try to avoid the keyword any at all cost

In this case it could be better to use string