Question

In a nutshell, I want my JQuery UI Slider to look like this:

Is there a way to only color the left half of the slider and then adjust it’s color when it slides either way?

http://denniswaltermartinez.com/jqueryslider.png

image if the web hosting isn’t working.

Answer 1

The image showed up fine for me.

Here’s some css to style the background of the slider (which only colors the left side).

#idOfSlider .ui-slider-range { background: #ef2929; }

To adjust it’s color:

function refresh()
{
  $('#idOfSlider').find('.ui-slider-range').css('background-color', 'red');
}

$( "#idOfSlider" ).slider({
   range: 'min',
   slide: refresh,
   change: refresh
});