使用自定义步骤创建角度材料滑块范围

Question

我想创建一个垫子滑块，其自定义步骤为0.25, 0.5, 1, 2, 3

我可以给我的增量多少价值？下面的代码

<mat-slider #slider  [min]="0.25" [max]="3" [step]="[increment]" (input)="onInputChange($event)" </mat-slider>

this.increment = ???

Answer 1

步骤的类型是数字，所以恐怕你无法直接达到你的目标。

但间接解决方案可以是这样的：我们想要一个 mat-slider，它的输出（ FinalValue:number ）可以是 0.25 或 0.5 或 ... 。

1- 你有 5 个步骤。将步骤存储在数组中，例如steps=[0.25, 0.5, 1, 2, 3]

2- 像往常一样使用垫子滑动以完成 5 个步骤。例如设置 min=0、max=4、step=1

3- 在 onInputChange() 中，您可以看到 mat-slide 的新值。我们将其命名为stepIndex，它是 0 到 4 之间的整数。

4- 使用stepIndex 计算出最终值。一个简单的映射。

您可以在这里看到所有这些：