Как использовать разные изображения для каждого маркера слайдера пользовательского интерфейса JQuery

Question

Я использую слайдер пользовательского интерфейса JQuery с двумя ручками (слайдер a.k.a range ). Я знаю, как стилизовать первую ручку :

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