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

链接：-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>

Answer 2

我认为没有任何好的方法可以做到这一点，但是有一种笨拙的方法。当释放拇指时，您可以收听更改事件，然后将其设置回最小值。问题是用户仍然可以拖动滑块并以低于您的最小值的值释放它，而当他们这样做时，它只会弹回到最小值。此外，也没有视觉上的迹象表明最小值或为什么它会反弹（您必须在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);
    }
}

您还可以在（输入）事件（每次移动拇指）上使用相同的技术，但是这种行为有些不规律。

如何禁用部分Angular材质滑块

2 个答案:

*。component.ts

*。component.html