jQuery to change values of progress-bar "aria-valuenow" attribute and CSS "width" property

Question

I have a progress bar on my page (Bootstrap) that looks like this:

<div id="theprogressbar" class="progress-bar progress-bar-u" 
     role="progressbar" aria-valuenow="75%" aria-valuemin="0" 
     aria-valuemax="100" style="width: 75%">

I would like to update it via jQuery, I have already done most of the work and calculated the new value I need to put into it, but am unsure of how to target the aria-valuenow and the style="width: " values.

Assuming my jQuery gives me the new value+% as a variable called newprogress:

$('#theprogressbar'). *(please help me finish this line)* (newprogress)

$('#theprogressbar').attr('aria-valuenow',value+'%'); and $('#theprogressbar').attr('width',value+'%'); — Umesh Sehta, Jun 04 '15 at 09:48

score 80 · Accepted Answer · edited May 07 '20 at 13:23

80

$('#theprogressbar').attr('aria-valuenow', newprogress).css('width', newprogress);

value default is px if you want set % follow code below

$('#theprogressbar').attr('aria-valuenow', newprogress).css('width', newprogress+'%');

edited May 07 '20 at 13:23

Nguyen Quy

81
1
5

answered Jun 04 '15 at 09:50

Denis Slonovschi

879
9
16

8

thanks that was spot on and worked a treat. Note: for my own purposes I had to add newprogress+'%' to ensure it entered the width as a % rather than px. – Ray_Hack Jun 04 '15 at 10:08
The value for `aria-valuenow` should be without `%`. In your original question, you have a `%` in the example and also state that `newprogress` already includes `%`. That is why this answer did not add it again. But, you should not add `%` to `newprogress` and instead only add it where you set the width. From your comment, I understand you already did this. I am just commenting to make it clear for others reading this. – Christopher K. Aug 18 '17 at 13:52
Probably worth adding a `Math.round(newprogress)` for the `aria-valuenow` assuming a screen reader is reading it or something like that -- that way, avoid it having to read something like `42.343233`. I don't fully know how `aria-valuenow` is used though. – Cymen Jun 18 '21 at 20:47

jameshwart lopez · Answer 2 · 2015-06-04T09:59:06.160

6

You could use

$('#theprogressbar').attr("aria-valuenow","the new value"); 
$('#theprogressbar').attr("style","width:"+theincrementingvalue);

Or you could use .css in jquery http://api.jquery.com/css/

edited Jun 04 '15 at 09:59

answered Jun 04 '15 at 09:53

jameshwart lopez

2,993
6
35
65

score 4 · Answer 3 · edited Apr 18 '17 at 09:35

4

This works better:

var newprogress=80;
$('#id').width(newprogress + "%").attr('aria-valuenow', newprogress);

edited Apr 18 '17 at 09:35

Pang

9,564
146
81
122

answered Apr 18 '17 at 09:18

Carlo Pescetto

41
1

1

Welcome to SO. Instead of just pasting code, it helps if you give an explanation as to why this works. That way, you help others realise why this works. – Karl Gjertsen Apr 18 '17 at 09:26

score 2 · Answer 4 · answered Jun 04 '15 at 09:52

2

To set width use width() method of jQuery.

To access aria-valuenow use attr().

Combining both:

$('#id').width(newprogress).attr('aria-valuenow', newprogress);

answered Jun 04 '15 at 09:52

Priyank Sheth

2,352
19
32

score 1 · Answer 5 · answered Jun 04 '15 at 09:49

You can apply the attributes of this elements as:

$('#theprogressbar').attr('aria-valuenow',value+'%');   

and 

$('#theprogressbar').attr('width',value+'%');

if the value is in variable.

$('#theprogressbar').attr('aria-valuenow',newprogressvalue);

jQuery to change values of progress-bar "aria-valuenow" attribute and CSS "width" property

5 Answers5