how to change the color of "progress[value]::-webkit-progress-value" property?

Question

How to change the color of

progress[value]::-webkit-progress-value {
                background-color: #00bdf8;
            }

at different values selected by the user when user select 30% then color should be red, at 60% it will be Yellow and then green

<input type="range" max="100" step="1" class="inputseekbar" id="range">
 <progress max="100" id="progressbarcolor"></progress>
 <output for="range" class="output"></output>

what will be the JS or Jqueryenter image description here

<output> tag is used for showing the "%".

Temani Afif · Accepted Answer · 2019-06-03T11:04:42.220

I would use CSS variable and adjust the value using JS depending on the value of the progress.

Here is a basic example:

var progress = document.querySelectorAll("progress");
for(var i = 0;i<progress.length;i++) {
   var n = 2 * parseInt(progress[i].getAttribute("value"));
   progress[i].style.setProperty("--c", "rgb("+n+","+n+",20)");
}

progress {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
}

progress::-webkit-progress-bar {
  background:grey;
}
progress::-webkit-progress-value {  
  background-color: var(--c,red);
}

<progress max="100"  value="20"></progress>
<progress max="100"  value="50"></progress>
<progress max="100"  value="60"></progress>
<progress max="100"  value="100"></progress>

You can also easily do it on change:

var progress = document.querySelector("progress");

document.querySelector("input").addEventListener('input', function (evt) {
   progress.setAttribute('value',this.value);
   progress.style.setProperty("--c", "rgb("+2*this.value+","+2*this.value+",20)");
});

progress {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
}

progress::-webkit-progress-bar {
  background:grey;
}
progress::-webkit-progress-value {  
  background-color: var(--c,red);
}

<input type="range" max="100" step="1" class="inputseekbar" id="range">
<progress max="100"  value="50"></progress>

Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery

score -1 · Answer 2 · answered Jun 03 '19 at 07:50

-1

Please Check For 30% value

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>


progress {
  color: red;
  background: green
}

progress::-webkit-progress-value {
  background: red;
}

progress::-moz-progress-bar {
  background: green;
}

</style>
</head>
<body>
<input type="range" max="100" step="1" class="inputseekbar" id="range">
 <progress max="100" value="30" id="progressbarcolor"></progress>
 <output for="range" class="output"></output>

</body>
</html>

answered Jun 03 '19 at 07:50

Vaish

21
7

My question is different. You have defined hard-coded value in HTML progress tag. But i want when user drag that progress bar to 30% then the color should be change. – Aditya Jun 03 '19 at 09:30

how to change the color of "progress[value]::-webkit-progress-value" property?

2 Answers2