मैं प्रत्येक 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> 

तो मुझे लगता है मैं या तो एक सीएसएस बच्चे चयनकर्ता जो क्रॉस-ब्राउज़र समस्याग्रस्त किया जा सकता का उपयोग करना होगा। या मैं दूसरे हैंडल में एक सीएसएस वर्ग जोड़ने के लिए कुछ JQuery चालबाजी का उपयोग कर सकता हूं? किसी ने इसे पहले से साफ तरीके से किया?

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

सीएसएस:

#hourlyRateSlider a:last-child {}