Получите значение ползунка с угловым материалом v2 во время скольжения

Я использую Angular Material v2 md-slider в компоненте

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

и myValue обновляется просто отлично, и метод onChange вызывается, но только когда я перестаю скользить и отпустите кнопку мыши.

Есть ли способ обновить myValue а также вызвать функцию, когда я myValue слайдер?

Я заметил атрибут aria-valuenow который меняется, когда я скользя, но я не совсем уверен, как использовать его для чего мне нужно (если его вообще можно использовать).

Ответы

Ответ 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);
}

Ответ 2

Я пытался получить значение матового ползунка внутри моего компонента, и я получил его, используя event.value, как показано ниже. Отправил этот ответ, чтобы помочь кому-то вроде меня:) Спасибо

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

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