使用自定义步骤创建 angular material 滑块范围

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

step的类型是number所以恐怕你不能直接达到你的目标.

但是一个间接的解决方案可以是这样的：我们想要一个 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 计算最终值。一个简单的映射。

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

Creating an angular material slider range with custom steps