Change Progress Bar color if value is more that max value

Question

How to change the colour of progress bar if the value is more than the max value set. which means the label on the progress bar can exceed the max value set to the progress bar and the color to be changed to red if the value is more than the max value. if the value is more than the max value change to red else to blue.

code:
https://jsbin.com/hamehel/1/edit?html,output

Answer 1

How about using a flag that compares progress.max and progress.value?

 const progress = document.querySelector('#progress'); const up10 = () => { progress.value += 10; changeStyle(); }; const down10 = () => { progress.value -= 10; changeStyle(); }; const changeStyle = () => { if (progress.max > progress.value) { progress.classList.remove('progress-max') } else { progress.classList.add('progress-max') } } changeStyle();

 .progress-max { color: lightblue; } .progress-max::-moz-progress-bar { background: red; } .progress-max::-webkit-progress-bar { background: red; }

 <!DOCTYPE html> <html lang="en" dir="ltr"> <body> <progress id="progress" value="100" max="100"></progress> <button onclick="up10()">+ 10</button> <button onclick="down10()">-10</button> </body> </html>

Change Progress Bar color if value is more that max value

Question

1 answers

solution1
0 2020-11-05 05:36:27

Change Progress Bar color if value is more that max value

Question

1 answers

solution1 0 2020-11-05 05:36:27

solution1
0 2020-11-05 05:36:27