Question

I have a range: true slider and want to show progress like the progress bar between the two handles of the slider. Kind of like this, http://jsfiddle.net/cG8qB/, except this will be happening in between the two handles of my slider instead of the whole slider like in that example and I only need the color updating instead of a slider handle.

So basically, I want to change the color of the part in between the two slider handles to something like the behavior of a range: min slider where the “min” is the left handle of my slider and the handle of this range: min slider is hidden.

Answer 1

Turns out the answer was in the original jsfiddle the whole time

This does the trick.

$("#slider").find('.ui-widget-header').css('width', x + '%');

This also works.

$("#slider div").css('width', x + '%');