<div class="range" id="range">
  <div class="slider" id="slider">
  </div>
</div>
.range{
  height: 10px;
  border: 1px solid black;
}
.slider{
  height: 10px;
  width: 0px;
  background-color: red;
}
const rangeDiv = document.querySelector("#range");
const sliderDiv = document.querySelector("#slider");
let percent = 0;

let timer = setInterval(()=> {
  if(percent === 100){
    clearInterval(timer);
  }
  
  sliderDiv.style.width = `${percent}%`
  percent += 5
}, 1000);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.