Is there a way to set a Jquery UI sliders background image to only the left half side of the slider button?

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

Is there a way开发者_JS百科 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.

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