<div class="main">
  <input id="myinput" type="range" min="0" value="25" max="200" />
</div>
.main {
  margin: 0 auto;
  width: 50%;
  text-align: center;
}
#myinput {
  border-radius: 0;
  height: 7px;
  width: 100%;
  outline: none;
  -webkit-appearance: none;
}

input[type='range']::-webkit-slider-thumb {
  width: 25px;
  -webkit-appearance: none;
  height: 25px;
  background: #fff;
  border-radius: 50%;
  border: 3px solid rgb(152 27 154);
}
const slider = document.getElementById("myinput")
const min = slider.min
const max = slider.max
const value = slider.value
      
slider.style.cssText +=';'+ `background: linear-gradient(to right, #a103ee, #f1783b ${(value-min)/(max-min)*100}%, #DEE2E6 ${(value-min)/(max-min)*100}%, #DEE2E6 100%); background: -webkit-linear-gradien(to right, #a103ee, #f1783b ${(value-min)/(max-min)*100}%, #DEE2E6 ${(value-min)/(max-min)*100}%, #DEE2E6 100%); background: -moz-linear-gradien(to right, #a103ee, #f1783b ${(value-min)/(max-min)*100}%, #DEE2E6 ${(value-min)/(max-min)*100}%, #DEE2E6 100%);`

slider.oninput = function() {
  this.style.cssText += ';'+ `background: linear-gradient(to right, #a103ee, #f1783b ${(this.value-this.min)/(this.max-this.min)*100}%, #DEE2E6 ${(this.value-this.min)/(this.max-this.min)*100}%, #DEE2E6 100%); background: -webkit-linear-gradient(to right, #a103ee, #f1783b ${(this.value-this.min)/(this.max-this.min)*100}%, #DEE2E6 ${(this.value-this.min)/(this.max-this.min)*100}%, #DEE2E6 100%); background: -moz-linear-gradient(to right, #a103ee, #f1783b ${(this.value-this.min)/(this.max-this.min)*100}%, #DEE2E6 ${(this.value-this.min)/(this.max-this.min)*100}%, #DEE2E6 100%);`
};

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.