纯CSS范围滑块，其背景颜色根据进度/值而变化

Question

我一直在寻找构建一个范围滑块，该滑块可根据当前进度值更改填充部分的背景颜色。例如，如果接近0，则变绿，中间为黄色，向最大值变红。

这是我的滑块的当前CSS：

@media screen and (-webkit-min-device-pixel-ratio:0) {
  input[type='range'] {
    overflow: hidden;
    width: 80px;
    -webkit-appearance: none;
    background-color: white;
    border: 1px #e1e4e8 solid;
    outline-width: 0;
  }

  input[type='range']::-webkit-slider-runnable-track {
    height: 10px;
    -webkit-appearance: none;
    color: red;
    margin-top: -1px;
  }

  input[type='range']::-webkit-slider-thumb {
    width: 4px;
    -webkit-appearance: none;
    height: 10px;
    background: #24292e;
    box-shadow: -80px 0 0 80px red;
  }
}

/* FF */
input[type="range"]::-moz-range-progress {
  background-color: red;
}

input[type="range"]::-moz-range-track {  
  background-color: white;
}

/* IE */
input[type="range"]::-ms-fill-lower {
  background-color: red;
}

input[type="range"]::-ms-fill-upper {  
  background-color: white;
}

我不确定是否可以仅使用CSS来完成，但是我宁愿完全不使用JS。我相信使用某些特定于浏览器的元素是否有可能？

谢谢