Javascript 选择值时，在chrome中输入[range]进度解决方案不工作

我试图实现一个范围输入，在句柄之前改变颜色。这是一个函数，每次我更改范围值时都会调用它：

 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%)`;

  }

下面是完整的工作示例

现在，如果你只听例子中的音乐，它是有效的，即使你可以看到渐变并不总是遵循控制柄-有时是晚了

---

如果你试图点击音域的某个地方来寻找某个特定的时间，它会在音频中寻找正确的时刻，但整个音轨会变成白色。为什么以及如何解决此问题？

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

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

---

单击轨迹时不会将其呈现为白色。

这不是因为焦点吗？哈哈，这样放置看起来简单而明显。是的，基本上就是焦点！有时候，在花了很长时间处理更复杂的问题之后，我们错过了一些简单的事情：是的，谢谢！其他人对代码的另一种看法是最好的：