多个滑块在tiptool中有价值？

Question

我已经看到了另一个question

上滑块值的一个很好的解决方案

当有一个滑块时，Andres Ilich的答案是一个非常好的解决方案，但如果我想在页面上有多个滑块怎么办？

请参阅Fiddle

<div id='termslider'></div>
<div id='coverslider'></div>

附带JavaScript和CSS

我已经重新命名了原始的tiptool类，试图区分这两个滑块，但到目前为止还没有成功。

Answer 1

您正在设置相对于类选择的html，它正在设置工具提示滑块句柄：

$("#termslider").slider({
...
slide:
$('.ui-slider-handle').html(tooltip)
...
create:
$('.ui-slider-handle').html(tooltip);

});


$("#coverslider").slider({
...
slide:
$('.ui-slider-handle').html(tooltip)
...
create:
$('.ui-slider-handle').html(tooltip);

});

您需要设置相关分区的幻灯片处理程序，您可以使用jquery find函数，如下所示：

$(this).find('.ui-slider-handle').html(tooltip);

检查工作小提琴：http://jsfiddle.net/db8j4g0r/5/