mat-slider拖动过程中如何实时触发变更事件并输出数值？

Angular Material 的 mat-slider 组件的 (change) 事件设计定位就是仅在滑块值修改确认时触发，也就是用户结束拖动、松开鼠标或者按下回车确认修改的时刻才会执行回调，拖动过程中的数值变动不会触发该事件。

你只需要将绑定的事件从 (change) 替换为 (input) 即可，(input) 事件会在滑块数值发生变化的瞬间实时触发，完全覆盖拖动过程中的所有数值变动场景。

修改后的组件代码如下：

<mat-slider
  tickInterval="1000"
  thumbLabel
  (input)="opacityBackgroundChange($event)"
  [(ngModel)]="opacityBackgroundColor"
  step="0.01"
  min="0"
  max="1"
></mat-slider>

补充说明 #

• 如果你同时需要在拖动结束后执行额外逻辑，可以同时保留 (change) 事件和 (input) 事件，两者触发时机独立不会冲突，分别对应实时值响应和最终值确认两个场景。
• 回调函数中可以直接通过 $event.value 获取当前滑块的实时数值。

内容的提问来源于stack exchange，提问作者user16382159