JQuery slider with progress bar

Question

I'm looking for a jQuery user interface implementation, so the slider fills one side of the panel with color when you drag the handle, sort of like a progress bar. Can someone give me advice on how I can approach this problem?

Thanks in advance.

Answer 1

I probably should have studied the slider() documentation more closely. Here is a much simpler way to do what I think you are looking for. It is already built into jQuery UI. The example below is taken directly from the jQuery slider() document page that I linked to above. The key is the range property passed to the parameters. In this case, the value of " min " will cause the slider to fill the left side with color.

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")); }); 

Markup:

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