CODEWITHSUNDEEP
angularangular-materialangular-material2angular5
ahat91
ahat91

Reputation: 566

Angular Material Slider - issue with setting value to zero

I want to create a slider using Angular Materials and Angular 5 that when the value is set to 0 on the slider then it will move back up to 10.

I am having an issue where the slider will not move back up to 10 if it was already at 10, otherwise it will.

myComponent.html

<mat-slider [(ngModel)]="weight" (change)="change()"></mat-slider>

myComponent.ts

  weight = 50;

  change(){
    if(this.weight == 0){
      this.weight = 10;
    }
  }

I have recreated the issue in StackBlitz: https://stackblitz.com/edit/angular-whq8ll

Upvotes: 1

Views: 6504

Answers (1)

Vivek Doshi
Vivek Doshi

Reputation: 58553

This problem is occurring because the change() is setting the value of the item outside the scope of the event changes. One way to solve this is to include the change() in the scope of change detection with ChangeDetectorRef. The other way would be to directly set the slide value to proc the change event again:

Component side :

weight = 50;
@ViewChild('slider')slider;
change(){
    console.log(this.slider.value);
    if(this.weight == 0){
    this.slider.value = 10;
    }
}

Template side :

<mat-slider [(ngModel)]="weight" #slider (change)="change()"></mat-slider>

WORKING DEMO

Upvotes: 2

Related Questions