Geek asks and answers

How to change the maximum value of the Bootstrap control panel?

Basically, I got 7 "steps" of my progressbar - the default max value is 100, so 100/7 are not divisible by integers.

Therefore, I would like to change the maximum value of progressbar, for example, 7.

   <div id="wizard-progressbar" class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
      <span class="sr-only">0% Complete</span>
   </div>

I tried changing aria-valuemax and tried to set data-max , but none of them changed anything. How can I change the maximum value of my Bootstrap panel?

+3
source share
1 answer

aria-valuenow, aria-valueminand aria-valuemaxare metadata. The style of the execution line is independent of their value.

Then you should use:

  • aria-valuemin="0"
  • aria-valuemax="7"

: style="width: 0%;". :

  • 0%
  • 14,3%
  • 28,6%
  • 42,9%
  • 57,2%
  • 71,5%
  • 85,8%
  • 100%

Bootply

, JS:

$('.progress-bar').each(function() {
  var min = $(this).attr('aria-valuemin');
  var max = $(this).attr('aria-valuemax');
  var now = $(this).attr('aria-valuenow');
  var siz = (now-min)*100/(max-min);
  $(this).css('width', siz+'%');
});

Bootply

+9

More articles:


All Articles