Weblocks range slider

Hi Guys,

Does anyone know how to change the slider range color as the slider handle is dragged?

Cheers!

Here is the theme: https://range-slider-weblocks.webflow.io

Here is the slider code:

<input type="range" value="1" class="slider" name="pages" min="1" max="20"/>

<style>
.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 10px;  
  background: #0082f3;
  outline: none;
  -webkit-transition: .2s;
  transition: opacity .2s;
  cursor: pointer;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 30px;
  height: 30px;
  border-radius: 50%; 
  background: #ff9900;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #ff9900;
  cursor: pointer;
}
</style>