javascript - 选择值时，chrome 中的输入[范围]进度解决方法不起作用

Question

我正在尝试实现一个范围输入，该输入可以更改句柄之前的颜色。这是每次更改范围值时都会调用的函数:

 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 - 有时它是“迟到的”。

如果您尝试单击范围内的某个位置来寻找特定时间，它将在音频中寻找正确的时刻，但整个轨道将变白。为什么以及如何解决这个问题？

Answer 1

我不确定这是否是您的意思，但删除:

input[type=range]:focus::-webkit-slider-runnable-track {
  background: #f0f0f0;
}

当您单击轨道时，不会将其呈现为白色。