Question

I’m looking to implement the jQuery UI so that the slider bar fills one side of the bar with a color as you drag the handle along, sort of like a progress bar. Can anyone give me tips on how I might approach this problem?

Thank you in advance.

Answer 1

I probably should have looked at the slider() documentation more closely. Here is a much easier way to do what I think you’re looking for. It’s already built into jQuery UI. The example below is taken directly from the jQuery slider() documention page which I linked to above. The key is the range property passed into the options. Giving this a value of “min” will cause the slider to fill the left side with a color.

The JavaScript:

$(function() {
    $("#slider-range-min").slider({
        range: "min",
        value: 37,
        min: 1,
        max: 700,
        slide: function(event, ui) {
            $("#amount").val('$' + ui.value);
        }
    });
    $("#amount").val('$' + $("#slider-range-min").slider("value"));
});

The markup:

<div id="slider-range-min"></div>