title: How do I use a different image for each JQuery UI Slider handle
body: <p>I'm using a JQuery UI slider which has two handles (a.k.a <em>range</em> slider). I know how to <a href="https://stackoverflow.com/questions/1207307/how-to-change-jquery-ui-slider-handle">style the first handle</a>:</p>
  
  <pre><code>.ui-slider-horizontal .ui-slider-handle {background: white url(https://stackoverflow.com/content/img/so/vote-arrow-down.png) no-repeat scroll 50% 50%;}
  </code></pre>
  
  <p>But how do I style the second handle differently?</p>
  
  <p>Using Firebug I can see Jquery does not uniquely identify each handle:</p>
  
  <pre><code>&lt;div id="hourlyRateSlider" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"&gt;
   &lt;div class="ui-slider-range ui-widget-header" style="left: 26%; width: 46%;"/&gt;
   &lt;a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 26%;"/&gt;
   &lt;a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 72%;"/&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So I imagine I have to use either a CSS child selector which could be cross-browser problematic. Or I could use some JQuery trickery to add a CSS class to the second handle? Anyone done this in a neat way before?</p>