Multiple Custom Handles (via unique class names) for jQuery Slider

This is has sort of been asked before but I haven't found a straight answer.

$(".milestone-timeline .slider-area").slider({
  range: 'min',
  value: 298,
  min: 0,
  max: 884,开发者_C百科
  values: [ 10, 280, 620, 850 ]    
});
$(".milestone-timeline .slider-area").slider("option", "disabled", true);

Okay, here I've created 4 different markers or .ui-slider-handle's. Now, when the slider is created it will make,

<div class="slider-area">
  <div class="ui-slider-range"></div>
  <a href="#" class="ui-slider-handle"></a>
  <a href="#" class="ui-slider-handle"></a>
  <a href="#" class="ui-slider-handle"></a>
  <a href="#" class="ui-slider-handle"></a>
</div>

I'd like to apply a different class name to each of these handles at the time the slider is created.

In the jQuery UI Slider Documentation it says,

"The slider widget will create handle elements with the class 'ui-slider-handle' on initialization. You can specify custom handle elements by creating and appending the elements and adding the 'ui-slider-handle' class before init. It will only create the number of handles needed to match the length of value/values. For example, if you specify 'values: [1, 5, 18]' and create one custom handle, the plugin will create the other two."

Unfortunately, I'm not sure how to go about creating and appending a custom 'ui-slider-handle'.

Any help would be GREATLY appreciated. Thanks!

Try adding the slider handle to the elements you're trying to turn into sliders, like this:

<div class="milestone-timeline">         
    <div class="ui-slider-handle"></div>
</div>

That works because you're still adding that custom element before the slider init function is called.

reading the documentation it looks like values is just a way of setting multiple slider handles. As is, it doesn't look like you can add classes.

you could possibly use nth-child selectors to add a class to each slider.

http://api.jquery.com/nth-child-selector/

http://api.jquery.com/addClass/