Làm cách nào để sử dụng hình ảnh khác nhau cho mỗi thanh công cụ JQuery UI Slider

Question

Tôi đang sử dụng thanh trượt Giao diện người dùng JQuery có hai tay cầm (a.k.a phạm vi thanh trượt). Tôi biết cách 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%;} 

Nhưng làm cách nào để tạo kiểu xử lý thứ hai khác nhau?

Sử dụng Firebug tôi có thể thấy Jquery không nhận ra duy nhất mỗi tay cầm:

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

Vì vậy, tôi tưởng tượng tôi phải sử dụng hoặc là một bộ chọn CSS đứa trẻ mà có thể là qua trình duyệt có vấn đề. Hoặc tôi có thể sử dụng một số thủ thuật JQuery để thêm một lớp CSS vào xử lý thứ hai? Bất cứ ai làm điều này một cách gọn gàng trước đây?

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