jQueryUI range slider showing progress

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 slide开发者_如何学JAVAr 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.

You can simply hide the handle by add the following css rule:

.ui-slider-handle { display: none }

Then you may want to disable the slider to prevent it from being changed by the user, i.e. adding disabled: true to the initiation.

See this in action: http://jsfiddle.net/william/cG8qB/8/.

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 + '%');