搜尋

首頁  >  問答  >  主體

設定進度條的自訂範圍

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

分鐘: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

#
P粉567112391P粉567112391261 天前365

全部回覆(1)我來回復

  • P粉588152636

    P粉5881526362024-02-27 12:41:49

    您可以將 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;
    }
    
    

    回覆
    0
  • 取消回覆