mat-slider鼠标拖拽时无法实时更新文本框如何解决

问题根因 #

Angular Material 的 mat-slider 不同事件的触发逻辑有明确区别：

• change、ngModelChange 事件仅在用户完成整个交互动作（鼠标拖拽松开、键盘操作结束）时才触发，这就是你之前绑定这两个事件只能在拖拽结束后更新数值的原因
• 键盘操作默认触发实时值变化事件，所以能直接同步更新

具体实现方案 #

根据你使用的 Angular Material 版本选择对应方案：

1. Angular Material 14及更早版本

绑定slide事件，该事件会在鼠标拖拽过程中连续触发，直接从事件对象中拿到实时值赋值即可：

<!-- 模板代码 -->
<mat-slider
  min="0"
  max="100"
  [(ngModel)]="sliderVal"
  (slide)="handleSliderChange($event)"
>
</mat-slider>
<input type="text" [(ngModel)]="sliderVal">

// 组件逻辑代码
import { Component } from '@angular/core';
import { MatSliderChange } from '@angular/material/slider';

@Component({
  // 你的组件配置
})
export class YourComponent {
  sliderVal = 0;

  handleSliderChange(event: MatSliderChange) {
    this.sliderVal = event.value as number;
  }
}

2. Angular Material 15+（MDC重构后的版本）

绑定input事件即可，重构后的MDC mat-slider的input事件会在拖拽过程中实时触发：

<!-- 模板代码 -->
<mat-slider min="0" max="100">
  <input 
    matSliderThumb 
    [(ngModel)]="sliderVal"
    (input)="handleSliderInput($event)"
  >
</mat-slider>
<input type="text" [(ngModel)]="sliderVal">

// 组件逻辑代码
import { Component } from '@angular/core';

@Component({
  // 你的组件配置
})
export class YourComponent {
  sliderVal = 0;

  handleSliderInput(event: Event) {
    const target = event.target as HTMLInputElement;
    this.sliderVal = Number(target.value);
  }
}

补充说明 #

如果开启了discrete离散值模式，确保没有配置延迟更新的相关参数，避免影响实时触发逻辑。

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