角度4/6材质滑条，时间刻度滑条24小时

Question

我正在使用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的形式显示selected的值，下面也是我试图用来以时间格式转换type: number值的内插法，但是没有任何作用

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

1. 我也想更改“拇指标签”的显示

截至目前的样子：

Answer 1

您只需要使用mat-slider的@bot.command(pass_context=True) async def longCommand(ctx): #typing status sleep(10) bot.say("Done!") 属性来格式化拇指标签。因此，将您的模板代码更新为：

displayWith

formatLabel方法可以是：

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

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

Example