So I was doing a slider to change text size. I checked the docs and to do a slider with knobs and 3 values I wrote:

In HTML:

<ion-item>
    <ion-label [ngClass]="size">Esto es un texto de ejemplo, utiliza el slider de abajo para ver la diferencia.</ion-label>
</ion-item>
<ion-item>
    <ion-icon name="text-outline"></ion-icon>
    <ion-range min="0" max="2" step="1" (ionChange)="changeLetterSize(size)" [(ngModel)]="size" snaps="true"></ion-range>
</ion-item>

In TypeScript:

size:any

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) //Temporal clg
}

But it spams the console and it doesn't work like intended. It spams the console and text is not changing at all... I've made 3 classes and it works if I put in the class manually, but slider doesn't work.

Example of the behavior here

To test this. I do ionic build android -l and test it in an Android device. Using later Chrome://Inspect to console.log and to controle app on computer.

CodePudding user response：

this.size => this.classSize

change class variable name. confused with the model name. and keep model size. in simple word you should separate model name and class variable name.