angular - 如何禁用部分 Angular Material slider

Question

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

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

该项目正在使用 Angular Materials，但我看不出有什么方法可以实现我想要的。我已经尝试过文档 https://material.angular.io/components/slider/overview并通过谷歌搜索但没有成功。

这是代码

<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

我认为没有什么好的方法可以做到这一点，但有一个笨拙的方法。您可以在释放拇指时收听更改事件，然后将值设置回最小值。问题是用户仍然能够拖动 slider 拇指并在低于最小值时释放它，当他们这样做时它只会弹回最小值。也没有视觉指示最小值或为什么它反弹(你必须向你的用户界面添加一些东西)。

<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);
    }
}

您也可以在(输入)事件(每次移动拇指)上使用相同的技术，但它的行为有点不稳定。