<div class="range">
  <input type="range" min="0" max="100" value="0" id="range">
</div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  line-height: 1;
}
.range {
  display: inline-block;
}

range.oninput = function () {
  console.log(this.value);
  document.querySelector(
    ".range"
  ).style.background = `linear-gradient(90deg, lightblue ${this.value}%, white ${this.value}px)`;
};