Get Angular Material v2 slider's value while sliding

Question

I am using Angular Material v2 md-slider in a component

@Component({
  selector: 'ha-light',
  template: `<md-slider min="0" max="1000" step="1" 
             [(ngModel)]="myValue" (change)="onChange()"></md-slider>
             {{myValue}}`,
  styleUrls: ['./light.component.css']
})
export class LightComponent implements OnInit {
  myValue = 500;

  constructor() { }

  ngOnInit() { }

  onChange(){
    console.log(this.myValue);
  }
}

and myValue updates just fine and onChange method is being called but only when I stop sliding and release the mouse button.

Is there a way to have myValue update and also have the function called as I am sliding the slider?

I have noticed aria-valuenow attribute which is changing as I am sliding but I am not quite sure how to make a use of it for what I need (if it can be used at all).

Answer 1

Great question. Such a functionality has been added to Angular Material. See this commit.

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);
}

Answer 2

I was trying to get mat-slider value inside of my component, and I got it by using event.value as shown below. Submitted this answer to help someone like me :) Thanks

<md-slider (input)="onInputChange($event)"></md-slider>

onInputChange(event: any) {
  console.log(event.value);
}