진행률 표시줄의 사용자 정의 범위 설정

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>

Answer 1

style="width: 100%"을 원하는 %로 변경할 수 있습니다. 막대의 %가 아니라 파란색 막대 내부의 너비입니다. Bootstrap을 사용하고 있는 것 같습니다. 이 진행률 표시줄에 대한 내용은 여기에서 읽을 수 있습니다: https://getbootstrap.com/docs/5.1/comComponents/progress/

최소값과 최대값을 제공할 수 있는 aria 속성을 열에 제공할 수도 있습니다. (위 링크에서도 보실 수 있습니다)

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

으아아아 으아아아

aria 값의 예(부트스트랩 문서에서 복사됨):

으아아아 으아아아