Javascript 如何解决输入范围滑块的跨浏览器兼容性？

我使用css自定义范围滑块，这里我面临的问题是滑块轨迹。在mozilla中，我将选择器用于进度（-moz范围进度）和IE-ms filler lower和-ms filler upper

因此，这两种浏览器都可以正常工作。但我无法通过使用webkit找到Chrome的解决方案，因此我无法根据滑块拇指的位置更改轨迹的颜色

CSS:

这是普朗克：

预期结果：

---

好的，我对此也很感兴趣，所以我做了一些研究，不幸的是，没有等效的css属性来实现相同的行为

我想在：：-webkit滑块上添加一个：：after元素，但Chrome不允许这样做，有一个错误，但他们以“不会修复”状态关闭了它，因为他们确实想删除曾经存在的功能（或bug？）

现在你能做什么不涉及JS？

根据建议，您可以：

纯CSS解决方案：

Chrome：隐藏输入[range]的溢出，并填充所有空间 左手到拇指的阴影颜色

IE：无需重新发明车轮： ：-ms填充较低

Firefox无需重新发明轮子： ：-moz范围进度

应用于代码的答案将添加如下内容：

@media screen and (-webkit-min-device-pixel-ratio:0) {
  input[type='range'] {
      overflow: hidden;
      background-color: #9a905d;
    }
  .text-size-slider .slider::-webkit-slider-thumb {
    border: none;
    cursor: pointer;
    -webkit-appearance: none;
    background-color: blue;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    box-shadow: 80px 0 0 80px gray;
    margin-top: -6px;
  }

}

但是，您将看到滑块不再是圆形的，而是与滑块的高度一样高，这是因为此解决方案依赖于隐藏输入的溢出并在右侧添加一个扩展到输入相同宽度的框阴影，这就是如何在每一侧实现两种不同颜色的方法，不幸的是，这也隐藏了Y轴上的

：：thumb

这是您开始考虑在伪元素之后添加一个

：：的时候，但正如我前面提到的，它不会起作用

那现在怎么办？好吧，使用JS。在上面链接的同一个问题中，有一个JS解决方案，我必须让它更具响应性。
感谢您的研究，纯javascript或angularjs是否可以不使用jquery。因此，请提供一个plunker链接，我用jquery尝试了您发送的小提琴，但它不起作用。
@media screen and (-webkit-min-device-pixel-ratio:0) {
  input[type='range'] {
      overflow: hidden;
      background-color: #9a905d;
    }
  .text-size-slider .slider::-webkit-slider-thumb {
    border: none;
    cursor: pointer;
    -webkit-appearance: none;
    background-color: blue;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    box-shadow: 80px 0 0 80px gray;
    margin-top: -6px;
  }

}