プログレスバーのカスタム範囲を設定する

Question

進行状況バーがパーセンテージで表示されるようになりました。 %から範囲スケールに変更したいと思います。

分: 0 最大: 10

これは %:

に適用されます

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

ただし、% から値の範囲に変更したいと考えています。

##更新

aria-value を持つものは機能しません。何故かはわからない。

解決策を見つけました。回答に基づいてパーセンテージを計算しました:

var 計算 = データ[1] / 10 * 100

Answer 1

style="width: 100%" を任意の % に変更できます。これはバーの % ではなく、内側の青いバーの幅です。ブートストラップを使用しているようです。この進行状況バーについては、https://getbootstrap.com/docs/5.1/components/progress/

で確認できます。

列に aria プロパティを指定して、最小値と最大値を指定することもできます。 (上のリンクからもご覧いただけます)

例: aria-valuenow="0" aria-valuemin="0" aria-valuemax="10"

＃＃＃。進捗{ 幅: 300ピクセル; マージン: 20px; }

aria 値の例 (Bootstrap ドキュメントからコピー):

＃＃＃。進捗{ マージン: 20px; 幅: 300ピクセル; }