jQuery Slider - 具有不同手柄的多个滑块

Question

我使用几个jQuery滑块作为用户输入。

每个滑块（1）由（2）创建，它们完美地工作。

1. div class="slider" id="a_unique_identifier_for_this_slider"> /div>

2. $(document).ready(function() { $(".slider").slider();});

我遇到的问题是我希望每个独特的滑块都有一个独特的手柄（图像，形状等）。这可以在jquery-ui.css中进行样式化，但它会改变我的所有滑块手柄。

有什么方法可以定义几个“句柄样式”，然后将它们归结为我想要的滑块？

谢谢， 克林顿

Answer 1

将它放在$(document).ready(function() {})代码块中：

$(".slider").slider();
$('#a_unique_identifier_for_this_slider .ui-slider-handle').eq(0).addClass("ui-slider-handle-some-unique-class");

这为其中一个滑块添加了一个css类。您可以为每个滑块执行此操作。 css取决于你。

Answer 2

您必须删除应用句柄样式的类并添加您自己的自定义类。

var sliders = $(".slider");
sliders.slider();
sliders[0].removeClass("classNameSpecifyingTheHangle").addClass("YourNewClassName");

未经测试..但这应该是一般的想法。

Answer 3

只需添加一些特定于滑块div的CSS

#a_unique_identifier_for_this_slider span.ui-slider-handle { background: red; }