Come utilizzare un'immagine diversa per ogni maniglia del cursore dell'interfaccia utente JQuery

Question

Sto utilizzando un dispositivo di scorrimento dell'interfaccia utente JQuery che dispone di due maniglie (a.k.a slider). Io so come style the first handle:

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

ma come faccio a stile la seconda maniglia in modo diverso?

Usando Firebug vedo Jquery non identifica in modo univoco ciascun manico:

<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> 

quindi immagino che devo utilizzare un selettore bambino CSS che potrebbe essere cross-browser problematico. Oppure potrei usare alcuni trucchi JQuery per aggiungere una classe CSS al secondo handle? Qualcuno ha fatto questo in modo pulito prima?

Answer 1

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

Answer 2

css:

#hourlyRateSlider a:last-child {}