Как я могу изменить цвет значения webkit-progress-value в Chrome?

Question

Я часами смотрел на подобные проблемы, и я ничего не пытаюсь изменить цвет заливки для выбранного диапазона в Chrome. Изменение цвета в -webkit-progress-value и -webkit-progress-bar ничего не дает. Я также попробовал немного Vanilla JS, но это тоже не сработало.

Я мог бы ослепнуть этой проблемой. Что мне не хватает?

PS. Я не могу заставить мой код работать здесь в стеке (извините), но у меня есть рабочий пример в Code Pen

  
input[type="range"] {
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;    
  width: 100%;
  height: 22px;
  border-radius: 3px;
  -webkit-appearance: none;       // Chrome reset
}
   
input[type="range"]::-webkit-slider-runnable-track {      
  height: 3px;
  border-radius: 2px;
  background-color: #434b52;
  transition: all .2s ease;
}

input[type="range"]::-webkit-progress-value {
  background-color: #ff0000; // red
}

input[type="range"]::-webkit-progress-bar {
  background-color: #00ff00; // Green
}   

input[type="range"]::-webkit-slider-thumb {      
  -webkit-appearance: none;       // Chrome reset
  box-sizing: border-box;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  border: solid 2px #2bdeee;
  background-color: #25bbc8;
  cursor: pointer;      
  margin-top: -7px;
}

.kx-range {  
  padding: 4px 8px;
}

html {
  background-color: #262a2f;
  margin-top: 50px;
}

<div class="kx-range">
  <input id="ranger" type="range" min="0" max="1000" value="250" step="1">
</div>