Question

之前有人问过，但我没有找到答案。

$(".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);

好的，我在这里创建了4个不同的标记或.ui-slider-handle。现在，当创建滑块时，它将生成

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

我想在创建滑块时为每个句柄应用不同的类名。

在它所说的jQuery UI Slider Documentation中，

“滑块小部件将创建带有'ui-slider-handle'类的句柄元素初始化。 您可以通过创建和附加自定义句柄元素来指定元素并在init之前添加'ui-slider-handle'类。它只会创建匹配值/值长度所需的句柄数。例如，如果您指定 'values：[1,5,18]'并创建一个自定义句柄，插件将创建另外两个。“

不幸的是，我不确定如何创建和附加自定义'ui-slider-handle'。

任何帮助都会非常感激。的谢谢！

Answer 1

尝试将滑块手柄添加到您尝试变成滑块的元素，如下所示：

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

这是有效的，因为在调用slider init函数之前，你仍然在添加自定义元素。

Answer 2

阅读它看起来像values的文档只是一种设置多个滑块手柄的方法。因为它看起来不像你可以添加类。

你可以使用nth-child选择器为每个滑块添加一个类。

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

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

jQuery Slider的多个自定义句柄（通过唯一的类名）

2 个答案: