Tetapkan julat tersuai untuk bar kemajuan

Question

Bar kemajuan saya kini berjalan sebagai peratusan. Saya mahu menukarnya daripada % kepada skala julat.

Minit: 0 Maksimum: 10

Ini terpakai kepada %:

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

Tetapi saya ingin menukarnya daripada % kepada julat nilai.

##Kemas kini

Perkara dengan nilai aria tidak berfungsi. Saya tidak tahu mengapa.

Saya menemui penyelesaian, saya mengira peratusan berdasarkan respons saya:

var calculations = data[1] / 10 * 100

Answer 1

Anda boleh menukar style="width: 100%" kepada apa sahaja % yang anda mahu, ia bukan % bar tetapi lebar bar biru dalam. Nampaknya anda sedang menggunakan Bootstrap. Anda boleh membaca tentang bar kemajuan ini di sini: https://getbootstrap.com/docs/5.1/components/progress/

Anda juga boleh menyediakan atribut aria untuk lajur anda, yang mana anda boleh memberikan nilai minimum dan maksimum. (boleh juga lihat di link di atas)

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

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

Contoh nilai

aria (disalin daripada dokumentasi Bootstrap):

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