Set a custom range for the progress bar

Question

My progress bar now runs as a percentage. I want to change it from % to range scale.

Minutes: 0 Maximum: 10

This applies to %:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<div class="progress">
  <div id="test" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 100%"></div>
</div>

But I want to change it from % to value range.

##renew

Things with aria-value don't work. I do not know why.

I found a solution, I calculated the percentage based on my responses:

var calculations = data[1] / 10 * 100

Answer 1

You can change style="width: 100%" to any % you want, which is not the % of the bar, but the width of the inner blue bar. It looks like you are using Bootstrap. You can read about this progress bar here: https://getbootstrap.com/docs/5.1/components/progress/

You can also provide aria properties for your column, to which you can provide minimum and maximum values. (can also be seen in the link above)

For example: aria-valuenow="0" aria-valuemin="0" aria-valuemax="10"

.progress{
  width: 300px;
  margin: 20px;
}

aria Example of values ​​(copied from Bootstrap documentation):

.progress{
  margin: 20px;
  width: 300px;
}