Couleur progression slide

Bonjour à tous,

Je cherche a concevoir un slide dont la couleur change en fonction de la progression curseur.

Lorsque je clique sur le slide j'ai bien une autre couleur mais elle n'est pas progressive en fonction du curseur.

Si quelqu'un peut m aider ca serait top

<div id="rangeV" style="font-size: 14pt; text-align: right;">
</div>
<input id="range" max="1000000" min="10000" step="10000" type="range" value="20000" />

input[type=range] {
  -webkit-appearance: none;
  margin: 20px 0;
  width: 100%;
}

input[type=range]:focus {
  outline: resolute; 
}

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

input[type=range] {
  -webkit-appearance: none;
 width: 100%;
  margin: 20px 0;
  
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px;
  cursor: pointer;
  animate: 0.9s;
  background: #ff0000;
  border-radius: 25px;
}

input[type=range]::-webkit-slider-thumb {
  height: 30px;
  width: 30px;
  border-radius: 50%;
  background: #A89153;
  box-shadow: 0 0 1px 0 rgba(0,0,0, 1);
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -13px;
  accent-color: #000000;
}