Angular范围滑块初始值设置失效？按官方文档配置未生效

你遇到的问题是直接在<mat-slider>标签上设置value属性无法生效，这是因为当使用<input matSliderThumb>时，滑块的数值是由这个input元素控制的，外层的<mat-slider>仅负责定义范围、步长等基础配置。

以下是两种可行的解决方式：

方法1：双向数据绑定 #

首先在组件类中定义初始值：

// 组件.ts文件
sliderValue = 1.5;

然后在模板中把input的value和这个变量双向绑定：

<mat-slider min="1" max="5" step="0.5">
  <input matSliderThumb [(value)]="sliderValue">
</mat-slider>

方法2：使用FormControl #

如果你的项目用到了Angular表单，可以通过FormControl来设置初始值：

// 组件.ts文件
import { FormControl } from '@angular/forms';

sliderControl = new FormControl(1.5);

模板中绑定FormControl：

<mat-slider min="1" max="5" step="0.5">
  <input matSliderThumb [formControl]="sliderControl">
</mat-slider>

这两种方式都能正确为滑块设置初始值，同时还能实时响应数值的变化。

内容的提问来源于stack exchange，提问作者Joel'-'