How do I use a different image for each JQuery UI Slider handle

Question

I'm using a JQuery UI slider which has two handles (a.k.a range slider). I know how to style the first handle:

.ui-slider-horizontal .ui-slider-handle {background: white url(http://stackoverflow.com/content/img/so/vote-arrow-down.png) no-repeat scroll 50% 50%;}

But how do I style the second handle differently?

Using Firebug I can see Jquery does not uniquely identify each handle:

<div id="hourlyRateSlider" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
 <div class="ui-slider-range ui-widget-header" style="left: 26%; width: 46%;"/>
 <a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 26%;"/>
 <a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 72%;"/>
</div>

So I imagine I have to use either a CSS child selector which could be cross-browser problematic. Or I could use some JQuery trickery to add a CSS class to the second handle? Anyone done this in a neat way before?

Answer 1

See these:

http://stackoverflow.com/questions/1170596/changing-slider-handle-image

http://stackoverflow.com/questions/1207307/how-to-change-jquery-ui-slider-handle

http://stackoverflow.com/questions/1207307/how-to-change-jquery-ui-slider-handle/1207338#1207338

Answer 2

$(window).load(function(){
    handle = $('#slider A.ui-slider-handle');        
    handle.eq(0).addClass('first-handle');        
    handle.eq(1).addClass('second-handle');
});

Answer 3

See this:

http://forum.jquery.com/topic/slider-with-two-arrows-working-example