效果如下

Slider滑塊軸的默認綁定輸出值是number 且取值范區間是【0-100】

根據需求 比如我這里是需要展示一天24小時，且只能展示半點和整點。可以把時間軸等分成48份，這里max取值上限可以設為48，步長為1

重點是自定義的格式化處理函數

formatTooltip (val) {let hour = 0let min = 0let ms = val * 1800hour = parseInt(ms / 3600)if (hour < 10) {hour = '0' + hour.toString()} else {hour = hour.toString()}min = ms % 3600if (min === 0) {min = '00'} else {min = '30'}let time = hour + ':' + minconsole.log(time)return time}

因為參數val是刻度上的一份，代表半小時時長，化成毫秒計算需乘1800。計算小時整除向下取整，計算分鐘整除求余，除盡為整點，除不盡為半點。這里注意不滿10小時要在前面補0。

2021/3/23補充
:marks寫法

總結

以上是生活随笔為你收集整理的element中滑块组件Slider展示一天24小时的时间问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。