如何禁用部分 Angular 材质滑块

Question

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

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

该项目正在使用 Angular 材料，但我没有看到任何方法可以实现我想要的。我已经尝试过文档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

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

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

您也可以在（输入）事件（每次移动拇指时）上使用相同的技术，但这会有点不稳定。

Answer 2

链接：- https://stackblitz.com/edit/angular-material-qpmnph?file=app%2Fapp.component.ts

*.component.ts

  min = '0';
  max = '100';
  step ="1";
  value ="20";

  slideIt(e) {
    if (e.value < this.value) {
         e.source.value = this.value;
    }
}

*.component.html

<mat-slider [min]="min" [max]="max" [step]="step" [value]="value" (change)="slideIt($event)"></mat-slider>