如何使用 bootstrap 滑块显示处理程序内的值？

Question

我正在使用 boostrap slider，这就是我的实现方式：

$("#yearSlider").slider({step: 20000, min: 0, max: 200000})

如何在处理程序中获取值而不是在工具提示中？

预期结果

Answer 1

只需使用值 属性:

示例：尝试在您链接的页面 (http://seiyria.com/bootstrap-slider/) 的控制台中 运行 此代码：

document.getElementById('ex1').value

您会看到值已正确返回

Answer 2

您可以通过以下方式设置滑动事件的值：

$("#yearSlider").on("slide", function(slideEvt) {
  $("#yearSlider .slider-handle").text(slideEvt.value);
});

参见fiddle。

滑块手柄上的

Css 有点滑稽 - 它看起来像是绝对定位的，所以可能有更好的方法使用 js 库的选项来设置它的样式。