css - 输入范围 slider 动画 CSS

Question

我想看看是否可以为短音频文件设置 input[type="range"] 元素的动画，这样进度看起来不那么“卡顿”

Here's a codepen我一直在使用一个简短的音频文件来尝试提出解决方案

这个问题专门针对 input[type="range"]，我不想使用自定义元素来构建动画进度条，我知道这是可能的，但对于这个特定的用例我'坚持使用范围元素。

有什么想法吗？

Answer 1

由于输入句柄是浏览器元素，因此无法设置动画。您必须构建一个类似于 jQuerUI one 的 slider 。然后通过更新其在范围更改输入上的位置来为 handle 设置动画。

如果你有更长的音频文件，这将不会发生(每像素大约 1 秒的音频)