¿Cómo utilizo una imagen diferente para cada manejador del control deslizante de UQ de JQuery?

Question

Estoy usando un control deslizante de IU de JQuery que tiene dos controles (un control deslizante de rango). Sé cómo 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%;} 

pero ¿cómo puedo Estilo del segundo mango de manera diferente?

Usando Firebug puedo ver Jquery no identifica de forma única cada mango:

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

así que me imagino que tengo que utilizar un selector CSS niño que podría ser problemático entre navegadores. ¿O podría usar algunos trucos de JQuery para agregar una clase de CSS al segundo mango? Alguien hizo esto de una manera ordenada antes?

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