如何禁用材质滑块

Answer 1

假设您有一个看起来像这样的模型

export interface MyModel {
   someValue: number;
}

然后您使用一些调用 API 的服务将其加载到组件中。只需通过 disabled input 将条件传递给它即可。

<mat-slider [disabled]="myModel.someValue > 50" min="1" max="5" step="0.5" value="{{myVar}}"></mat-slider>

Answer 2

其实你可以像这样使用

disabled

<mat-slider min="1" max="5" disabled  step="0.5" value="{{myVar}}"></mat-slider>

没什么大不了的。

Answer 3

添加

style="pointer-events: none;"

将防止值更改

<mat-slider style="pointer-events: none;" min="1" max="5" step="0.5" value="{{myVar}}" ></mat-slider>