使用自定义处理程序的Bootstrap滑块拖动时数值不更新求助

嘿，我帮你找出了导致Bootstrap滑块拖动时数值不更新的几个关键问题，咱们一步步来修复：

1. 先修正HTML里的id错误 #

你写的input标签里id是#ex6，这可不对哦——#是CSS/jQuery选择器里用来标记id的前缀，不是id属性本身的内容。把id改成ex6就对了，这样JS里的选择器才能正确找到它：

<input id="ex6" type="range" data-slider-min="-5" data-slider-max="20" data-slider-step="1" data-slider-value="3"/>
<span id="ex6CurrentSliderValLabel">Current Slider Value: <span id="ex6SliderVal">3</span></span>

2. 补全并修正JS的事件处理逻辑 #

你提供的JS代码里textContent后面没写完，而且得注意Bootstrap Sliderslide事件的回调参数用法。通常回调会收到一个事件对象，当前滑块值存在slideEvt.value里，补全后的代码应该是这样：

var slider = new Slider("#ex6");
slider.on("slide", function(slideEvt) {
  document.getElementById("ex6SliderVal").textContent = slideEvt.value;
});

如果你的Bootstrap Slider版本是直接把数值作为回调参数传入的，也可以这么写：

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

3. 额外检查：依赖是否正确加载 #

最后别忘了确认页面已经按顺序加载了所有必需的文件：

• jQuery（如果你的Bootstrap Slider版本依赖它）
• Bootstrap的CSS和JS
• Bootstrap Slider的JS文件

比如在页面底部这样引入：

<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="bootstrap-slider.min.js"></script>

这样修改之后，拖动滑块的时候，显示数值的ex6SliderVal标签就会实时更新啦！

内容的提问来源于stack exchange，提问作者Fabian B.