3

Basically I got 7 "steps" of my progressbar - the default max value is 100 so 100/7 doesn't divide into whole numbers.

Therefore I'd like to change the max value of the progressbar to, for instance, 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've tried changing the aria-valuemax and tried setting data-max but none of them changes anything. How can I change the max value of my Bootstrap progressbar?

Jamie Romeo
  • 255
  • 2
  • 4
  • 13
  • @DanKanze A thousand pardons but I don't quite follow you? – Jamie Romeo Feb 12 '14 at 00:46
  • If your form has 7 steps, set your max to 7. Then set your value to the current step. So 1/7 is page 1 or whatever. – Dan Kanze Feb 12 '14 at 00:58
  • @DanKanze When you say "set your max to 7" are you referring to the progress bar max value? I mean how to set that max value is my exact question... – Jamie Romeo Feb 12 '14 at 01:12
  • The aria values are very similar to "alt" tags in a way that it helps with accessibility (read http://stackoverflow.com/questions/4176844/can-someone-explain-the-html5-aria-attribute). In your case, changing values does not make visual changes. You still have to rely on that percentage width. While its true that dividing 100 by 7 does not give you whole numbers, and since it looks like you are hard coding the values in, you might as well go with the closest rounded value like add 14.28 or 14.3 to every each 7 steps and make the last one 100%. – Jennift Feb 12 '14 at 05:03

1 Answers1

10

aria-valuenow, aria-valuemin and aria-valuemax are meta-datas. The progress bar style is not dependent on their value.

Then you should use :

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

The active value is this one : style="width: 0%;". You'll need to set it manually to :

  • 0%
  • 14.3%
  • 28.6%
  • 42.9%
  • 57.2%
  • 71.5%
  • 85.8%
  • 100%

Bootply

If you want to set this width automatically, you can do it using 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

zessx
  • 68,042
  • 28
  • 135
  • 158