Ползунок диапазона чистого 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;
}

I'mЯ не уверен, что это можно сделать только с помощью CSS, но я бы предпочел вообще не использовать JS.Я считаю, что с некоторыми элементами, специфичными для браузера, это возможно?

Спасибо