progressbar max width at some %

I have a progressbar and I want it to be full at 2000% width

like

let progress = 0
if(progress === 0) {
     $(".progressbar").css('width' , 0+"%")
 } else if(progress === 250) {
     $(".progressbar").css('width' , 250+"%")
}

But when progress is 250% it shows that progressbar is full, but I don’t want that.

Or should I make it like when progress === 250, the progressbar will be at 10% for example?

If there is another way to do this, please help

>Solution :

This is more maths than coding. If 2000 is your 100% then, assuming the rest of your range is linear, you need to divide progress by 20 and set that as your width percentage.

Here’s a working example:

progressInput.addEventListener('input', (e) => {
  let progress = e.target.value;
  val.textContent = progress;
  bar.style.width = `${progress/20}%`
})

#container {
  width: 150px;
  height: 30px;
  outline:auto;
}

#bar {
  background-color:green;
  height: 100%;
  width: 0%;
}

<input id="progressInput" type="range" max="2000" value="0"><span id="val">0</span>
<div id="container">
  <div id="bar"></div>
</div>