滑动时获取 Angular Material v2 滑块的值 [英] Get Angular Material v2 slider's value while sliding

问题描述

我在组件中使用 Angular Material v2 md-slider

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

和 myValue 更新得很好并且 onChange 方法被调用，但只有当我停止滑动并释放鼠标按钮时.

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

有没有办法让 myValue 更新并在我滑动滑块时调用函数?

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

我注意到 aria-valuenow 属性在我滑动时发生了变化，但我不太确定如何使用它来满足我的需要(如果它可以使用的话).

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).

推荐答案

很好的问题.这样的功能已添加到 Angular Material 中.请参阅此提交.

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

在您的情况下，您不会监听 (change) 事件，而是监听 (input) 事件.下面是一个例子:

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

这篇关于滑动时获取 Angular Material v2 滑块的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！