Question

如果您有这样的滑块

<mat-slider disabled min="1" max="10" value="1"></mat-slider>

您遇到以下问题：应该禁用滑块，但不要禁用（从样式角度看）。仅当您单击旋钮时，他才会处于禁用状态（在我的真实项目中）。如果您单击另一区域，则该旋钮再次看起来像已启用。

已设置值的禁用滑块：

禁用的最小值滑块：

两个滑块均被禁用，但是样式不同。

由于该值为1，并且最小滑块值也为1，因此系统除了应用mat-slider-min-value类之外，还应用mat-slider-disabled类，这将覆盖{{1}的background-color }项目。

另一方面，如果您设置了例如到两个，您将获得应有的禁用状态。但是，如果您具有这样的值，那会使用户感到困惑。

我试图不设置一个值，但这不会改变行为。此外，我尝试将此CSS添加到组件CSS中以覆盖颜色

mat-slider-thumb

但是它没有被应用。

那么如何使滑块显示“已禁用”？

编辑：

如果将上述CSS放入常规CSS文件（在本例中为 styles.scss ），那么我会得到想要的外观。但是对我来说，这仍然看起来像是在禁用案例中出现的滑块错误。也许对此有更好的解决方案/解决方案。