Mat Slider value not getting updated while sliding

Question

Mat slider value is not sync updated while sliding.

<mat-slider [(ngModel)]="myValue" step="1" min="0" max="100" ></mat-slider>
{{myValue}} 

It just got updated only after release slider thumb.

Answer 1

You need to bind the input output (weird name selection) to a handler, see the docs. If you want to keep track of the slider value you could to the following:

<mat-slider (change)="updateSliderValue($event)" (input)="updateSliderValue($event)
 [(ngModel)]="myValue" 
 step="1" min="0" max="100" ></mat-slider>
{{ slideValue$ | async }}


import {MatSliderChange} from '@angular/material';
// Using [email protected]
import {BehaviorSubject} from 'rxjs'
private slideSubject = new BehaviorSubject<int>(0);
readonly slideValue$ = this.slideSubject.asObservable();

updateSliderValue(event: MatSliderChange){
    slideSubject.next(event.value);
}