如何禁用部分 Angular 材质滑块

Question

对于我正在进行的项目的一部分，我希望能够创建一个显示 0-100 岁年龄范围的滑块，但滑块需要在某个点停止，例如 18 岁。

我仍然想显示 0-18 岁，但用户应该只能滑动到 19-100 岁。

该项目正在使用 Angular Materials，但我没有看到任何方法来实现我想要的。我已经尝试过文档https://material.angular.io/components/slider/overview并通过 Google 搜索，但没有运气。

这是代码

<mat-slider min="0" max="100" step="1" value="20"></mat-slider>

这就是我想做的

<mat-slider min="0" max="100" start="19" end="100" step="1" value="20"></mat-slider>

Answer 1

我不认为有什么好的方法可以做到这一点，但有一个笨拙的方法。您可以在释放拇指时监听更改事件，然后将值设置回最小值。问题在于，用户仍然可以拖动滑块拇指并在低于最小值的值处释放它，并且当他们这样做时，它只会弹回到最小值。此外，没有任何视觉指示说明最小值或为什么它会反弹（您必须在用户界面中添加一些内容）。

<mat-slider min="0" max="100" step="1" value="20" (change)="sliderChange($event)">
</mat-slider>

sliderChange(event) {
    if (event.value < 19) {
        setTimeout(() => event.source.value = 19);
    }
}

您还可以对（输入）事件（每次移动拇指时）使用相同的技术，但其行为有点不稳定。