角度4/6材料滑块，时标滑块24小时

Posted 2021-04-13

我正在使用Angular Material来创建一个滑块。这个滑块是24小时，我想在侧面显示滑块的值。以下是有效的：

1. 使用(change)事件.html获取滑块的值

<mat-slider style="width:50%" thumbLabel name="range1" #timeSlider type="range" tickInterval="1" step="0.5" min="1" max="24"
                (change)="onChangeRange(timeSlider.value)">
</mat-slider>

.TS

onChangeRange(rangeValue: any) {
  console.log(rangeValue);
  this.showTime = rangeValue;
}

问题：

1. 我想以时间HH:mm的形式显示所选的值，下面也是插值我试图用时间格式转换type: number值但没有什么工作

<button mat-raised-button class="displayTimeBtn">
  <span>
    {{showTime}}
    <!-- {{showTime | date:"shortTime"}} -->
  </span>
</button>

2. 我也想改变“拇指标签”的显示

它现在看起来像什么：

答案

您只需要使用mat-slider的displayWith属性来格式化thumb标签。因此，请将模板代码更新为：

<mat-slider thumbLabel [displayWith]="formatLabel" tickInterval="1" step="0.5"
  min="1" max="24" (change)="onChangeRange($event)">
</mat-slider>

其中formatLabel方法可以是：

 formatLabel(value: number | null) {
    if (!value) {
      return 0;
    }

    let decimalPart = +value.toString().replace(/^[^.]+/,'0');
    let mm = decimalPart * 60;
    var mmPart = mm.toString().length == 1 ? mm.toString() + "0" : mm.toString();

    if (value >= 0) {
      let valueStr = value.toFixed(2);
      let strArr = valueStr.split(".");
      if(strArr[0].length == 1) {
        strArr[0] = "0" + strArr[0];
      }
      var hhPart = strArr[0];
    }

    return hhPart + ":" + mmPart;
 }

现在，您可以使用任何格式化或非格式化的值作为模型值。

Example