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

【问题标题】：Creating an angular material slider range with custom steps使用自定义步骤创建角度材质滑块范围
【发布时间】：2021-10-20 14:25:01
【问题描述】：

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

我能给我的增量提供什么价值？代码如下

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

this.increment = ???

【问题讨论】：

【解决方案1】：

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

但间接解决方案可以是这样的：我们想要一个垫子滑块，它的输出（finalValue:number）可以是 0.25 或 0.5 或 ...。

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

2- 像往常一样使用 mat-slide 以获得 5 个步骤。例如设置 min=0, max=4, step=1

3- 在 onInputChange() 中你可以看到 mat-slide 的新值。我们把它命名为stepIndex，它是一个介于0和4之间的整数。

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

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

【讨论】：