Angular 角度4/6装备滑块，24小时时间刻度滑块

我正在使用角度材质创建滑块。这个滑块是24小时的，我想在侧面显示滑块的值。 以下几点正在发挥作用：

使用

（更改）

事件获取更改时滑块的值 .html

.ts

onChangeRange（范围值：任意）{
console.log（rangeValue）；
this.showTime=范围值；
}

问题：

我想以时间的形式显示所选的值

HH:mm

，下面是我试图用时间格式转换

type:number

值的插值，但没有任何效果

{{showTime}}

我还想更改“拇指标签”的显示

到目前为止它看起来是什么样子：

---

您只需使用mat滑块的

displayWith

属性来格式化拇指标签。因此，请将模板代码更新为：

其中formatLabel方法可以是：

formatLabel（值：number | null）{
如果（！值）{
返回0；
}
让decimalPart=+value.toString（）.replace（/^[^\.]+/，'0'）；
设mm=小数点*60；
var mmPart=mm.toString（）.length==1？mm.toString（）+“0”：mm.toString（）；
如果（值>=0）{
设valueStr=value.toFixed（2）；
设strArr=valueStr.split（“.”）；
if（strArr[0]。长度==1）{
strArr[0]=“0”+strArr[0]；
}
var hhPart=strArr[0]；
}
返回hhPart+“：”+mmPart；
}

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

---

请在您的问题中添加此评论，而不是在评论中。谢谢@Shantanu的回答，但我在演示中看不到任何内容。@jay您是在chrome中打开链接的吗？你支持任何公司代理吗？因为可能有一些脚本没有加载。因为我能够查看这个stackblitz应用程序，所以我能够打开解决方案，它工作得非常好。但我还有一个问题，在半个n小时时，它显示当前值01:50或07:50（我知道这是因为我现在是如何设置的）。但是因为这个刻度是时间刻度，我怎么能把它改成01:30或07:30的格式呢？再次感谢您的帮助@shantanu@jay检查更新的代码和更新的示例。我已将小数部分更新为分钟值。因此，对于任何步长的滑块，它都能按预期工作，这是完美的。非常感谢你的帮助。我尝试了很多，想找到一些更苗条的东西，比如时间刻度滑块，但什么也找不到。我认为这对其他人也是一个很大的帮助。再次感谢。