Search code examples
jqueryjquery-uisliderrangejquery-ui-slider

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 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.

Solution

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