设置进度条的自定义范围

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