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
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>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 :)