在 tiptool 中具有多个值的滑块？

Question

我在另一个 question

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

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

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

附带 JavaScript 和 CSS

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

Answer 1

您正在设置 html 相对于 class 选择，这将设置两个工具提示滑块手柄：

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

});

需要设置相关分区的slide handler，可以使用jqueryfind函数如下：

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

检查工作 fiddle : http://jsfiddle.net/db8j4g0r/5/

在 tiptool 中具有多个值的滑块？

multiple sliders with value in tiptool?

html

javascript

css

jquery

slider