Get value of slider with corner material v2 while sliding

Question

I am using Angular Material v2 md-sliderin 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 it myValueupdates just fine, and the method onChangeis called, but only when I stop sliding and release the mouse button.

Is there a way to update myValueand also call a function when I have a myValueslider?

I noticed an attribute aria-valuenowthat changes when I'm gliding, but I'm not quite sure how to use it for what I need (if it can be used at all).

Answer 1

Angular Material. .

(change), (input). :

<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

, , event.value, . , - :)

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

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

Hide result