如何在Angular Material项目中创建指定日期选项的选择滑块

我想要实现一个仅提供若干指定选项、而非完整连续区间可选的滑块，该需求通过下拉菜单即可实现，但滑块的视觉呈现效果更优。我当前在使用Material组件库的Angular项目中开发，暂未找到让Material滑块或原生HTML <input> 滑块支持非数值类型选项的方法，以下是我的实现尝试：

原有代码 #

HTML #

<div class="dateSlider">
  <input #dateSlider type="range" id="dateSlider" name="dateSlider"
   list="dateList" (change)="dateChanged()" min={{value}} max={{value3}}>
  <label for="dateSlider">{{currentDate}}</label>
</div>

<datalist id="dateList">
  <option>{{value}}</option>
  <option>{{value2}}</option>
  <option>{{value3}}</option>
</datalist>

TypeScript #

private value= new Date('September 27, 2021 14:23:00').toUTCString();
private value2= new Date('September 27, 2021 14:24:00').toUTCString();
private value3= new Date('September 27, 2021 14:25:00').toUTCString();
private currentDate;

dateChanged(){
  this.currentDate = this.dateSlider.nativeElement.value;
}

问题表现 #

理论上上述代码应当将标签内容设置为选中的日期，但目前标签仅展示滑块的数值型当前值。

补充说明 #

我尚未完全解决该问题，对于不需要可变步长的开发者，可以参考Angular Material滑块的离散值官方实现方案。

问题根源 #

原生type="range"的<input>元素仅支持数值类型的value、min、max属性，你直接传入日期字符串作为参数会被组件默认忽略，自动 fallback 到0-100的默认数值区间，因此你获取到的滑块值是数字而非预期的日期。

修复方案 #

你可以通过「数值索引映射离散选项」的方式实现需求：将所有可选的日期存为一个数组，滑块的取值范围对应数组的索引，选中后通过索引匹配对应的日期值即可。

修改后HTML代码 #

<div class="dateSlider">
  <input #dateSlider type="range" id="dateSlider" name="dateSlider"
   list="dateList" (change)="dateChanged()" min="0" max="{{dateOptions.length - 1}}" step="1">
  <label for="dateSlider">{{currentDate}}</label>
</div>

<datalist id="dateList">
  <option *ngFor="let option of dateOptions; let i = index" value="{{i}}">{{option}}</option>
</datalist>

修改后TypeScript代码 #

// 所有可选日期统一存入数组
private dateOptions = [
  new Date('September 27, 2021 14:23:00').toUTCString(),
  new Date('September 27, 2021 14:24:00').toUTCString(),
  new Date('September 27, 2021 14:25:00').toUTCString()
];
private currentDate = this.dateOptions[0]; // 默认选中第一个值

@ViewChild('dateSlider') dateSlider: ElementRef;

dateChanged(){
  // 用滑块返回的数值索引匹配对应的日期
  const selectIndex = Number(this.dateSlider.nativeElement.value);
  this.currentDate = this.dateOptions[selectIndex];
}

如果你使用Angular Material的滑块组件，也可以直接用它内置的step参数设置步长为1，配合和上面相同的索引映射逻辑实现，适配性更好。

内容的提问来源于stack exchange，提问作者Zared H