progressbar max width at some %

user_19739202 0
Viewed 27

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

javascript
2 Answers

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>

user_178040160

You should use percentage from 0% to 100%. Don't go beyond that. You can just map 2000 to 100. If you want to make it 200% => 10% Just do..

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

Hope this will solve your problem :)

user_167246810
Related