Définir une plage personnalisée pour la barre de progression

Question

Ma barre de progression s'affiche désormais sous forme de pourcentage. Je veux le changer de% à l'échelle de plage.

Minutes : 0 Maximum : 10

Cela s'applique à % : 

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

Mais je veux le changer de % en plage de valeurs.

##Mise à jour

Les choses avec une valeur aria ne fonctionnent pas. Je ne sais pas pourquoi.

J'ai trouvé une solution, j'ai calculé le pourcentage en fonction de mes réponses :

var calculations = data[1] / 10 * 100

Answer 1

Vous pouvez modifier style="width: 100%" comme % vous voulez, ce n'est pas le % de la barre mais la largeur de la barre bleue intérieure. Il semble que vous utilisez Bootstrap. Vous pouvez en savoir plus sur cette barre de progression ici : https://getbootstrap.com/docs/5.1/components/progress/

Vous pouvez également fournir un attribut aria pour votre colonne, auquel vous pouvez fournir une valeur minimale et maximale. (peut également être vu dans le lien ci-dessus)

Par exemple : aria-valuenow="0" aria-valuemin="0" aria-valuemax="10"

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

Exemple de valeur

aria (copiée à partir de la documentation Bootstrap) :

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