Как использовать другое изображение для каждой ручки слайдера JQuery UI

Question

Я использую слайдер JQuery UI, который имеет две ручки (a.k.a диапазон слайдер). Я знаю, как 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%;} 

Но как я стиль второй ручки по-разному?

Использование Firebug Я могу видеть Jquery не уникально идентифицировать каждую ручку:

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

Так я полагаю, я должен использовать или селектор CSS ребенка, который может быть кросс-браузер проблематично. Или я могу использовать некоторые трюки JQuery, чтобы добавить класс CSS ко второму дескриптору? Кто-нибудь сделал это аккуратным способом раньше?

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