输入范围滑块动画CSS

Question

例如，我想看看是否可以为短音频文件设置input[type="range"]元素的动画，以便进度看起来不太“混乱”

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

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

有什么想法吗？

Answer 1

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

如果音频文件较长，则不会发生这种情况（每个像素大约1秒钟的音频）