javascript - Bootstrap Slider - 更新幻灯片上的值或单击

Question

我在我的网站上使用 HTML 和 JavaScript（没有 Jquery）使用引导滑块。它几乎按照我的意愿设置，带有永久的工具提示和值等。

但是，我想存储用户完成的值。如果用户滑动滑块，我在某种程度上可以工作。如果用户点击滑块，那么它不会更新值。

关于跟踪任何类型的交互的任何建议？

HTML：

<input id="sliderman1" type="text" data-slider-min="0" data-slider-max="4" data-slider-step="1" data-slider-value="2" data-slider-ticks="[0, 4]"/> 
<span id="sliderman1Value">3</span></span>

JS：

var values = ['None', 'Read', 'Speak', 'Test', 'Last'];
var formatter = (index) => values[index];

var slider = new Slider("#sliderman1", {formatter} );
slider.on("slide", function(sliderValue) {
document.getElementById("sliderman1Value").textContent = sliderValue;

});

Answer 1

添加一个 onTouchEnd 事件监听器怎么样？

JS

slider.on("onTouchEnd", function(sliderValue) {
   document.getElementById("sliderman1Value").textContent = sliderValue;
}

或直接将其添加到您的滑块：HTML

<input ontouchend="myFunction(event)" ... />