jquery progress bar - display quarter ticks and values underneath

Question

I'm trying to add quarter tick marks, represented by a vertical line, to the jQuery progressbar, and then add the corresponding values underneath the tick marks. I would like these vertical bars to overlay over the actual progress bar.

For example:

-----------------|--------------------------|---------------------|---------------------|

        25%              50%           75%          100%

All I want to do is to visually represent where the progress is currently located.

Potentially due to my inexperience, I was not able to find an answer to this question.

Thank you all for the help.

Answer 1

Just change the value in certain places within your code.

//initialize

$( ".selector" ).progressbar({ value: 25 });

Get or set the value option, after initialization:

// getter

var value = $( ".selector" ).progressbar( "option", "value" );  

// setter

$( ".selector" ).progressbar( "option", "value", 25 );

Source here http://api.jqueryui.com/progressbar/

EDIT: I assumed this is the progress bar you are attemting to use