Get Angular Material v2 slider’s value while sliding

As of v15

<mat-slider>
  <input (input)="onInputChange($event)" />
</mat-slider>
onInputChange(event: Event) {
  console.log("This is emitted as the thumb slides");
  console.log((event.target as HTMLInputElement).value);
}

Before v15

In your case, you would not listen to the (change) event but rather to the (input) event. Here is an example:

<mat-slider (input)="onInputChange($event)"></mat-slider>
onInputChange(event: MatSliderChange) {
  console.log("This is emitted as the thumb slides");
  console.log(event.value);
}

Leave a Comment