Question

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

Answer 1

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.