我正在尝试实现一个范围输入,该输入可以更改句柄之前的颜色。这是每次更改范围值时都会调用的函数:
updateProgress (val = this.range.value) {
const percent = Math.ceil(
((val - this.range.min) /
(this.range.max - this.range.min)) * 100
);
this.range.style.background = `linear-gradient(to right, #ffffff 0%,#ffffff ${
percent
}%,#363439 ${
percent
}%,#363439 100%)`;
}
这是完整的工作示例 https://jsfiddle.net/a2rLfu6a/
现在,如果您只听示例中的音乐,它就会起作用,即使您可以看到渐变并不总是跟随 handle - 有时它是“迟到的”。
如果您尝试单击范围内的某个位置来寻找特定时间,它将在音频中寻找正确的时刻,但整个轨道将变白。为什么以及如何解决这个问题?
最佳答案
我不确定这是否是您的意思,但删除:
input[type=range]:focus::-webkit-slider-runnable-track {
background: #f0f0f0;
}
当您单击轨道时,不会将其呈现为白色。
关于javascript - 选择值时,chrome 中的输入[范围]进度解决方法不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42798929/