設定進度條的自訂範圍

Question

我的進度條現在會以百分比運行。我想將其從 % 更改為範圍刻度。

分鐘：0 最大：10

這適用於％：

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

#

但我想將其從 % 更改為值範圍。

##更新

具有 aria-value 的東西不起作用。我不知道為什麼。

我找到了一個解決方案，我根據我的回覆計算了百分比：

var calculations = data[1] / 10 * 100

#

Answer 1

您可以將 style="width: 100%" 更改為您想要的任何％，這不是條形的％，而是內部藍色條形的寬度。看來您正在使用 Bootstrap。您可以在此處閱讀有關此進度條的資訊： https://getbootstrap.com/docs/5.1/元件/進度/

您也可以為您的欄位提供 aria 屬性，您可以為其提供最小值和最大值。 （也可以在上面的連結中看到）

例如：aria-valuenow="0" aria-valuemin="0" aria-valuemax="10"

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

aria 值的範例（從 Bootstrap 文件複製）：

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