bootstrap-尽管脚本以正确的顺序开始，但滑块不工作

Question

我的 <head> 标签有：

<link href="/Content/bootstrap.css" rel="stylesheet">
...
<script src="/Scripts/jquery-3.3.1.js"></script>
...
<script src="/Scripts/bootstrap.js"></script>
...
<script src="/Scripts/bootstrap-slider.min.js"></script>

HTML:

<input id="ex4" type="text" data-slider-min="-5" data-slider-max="20" data-slider-step="1" data-slider-value="-3" data-slider-orientation="vertical"/>

JS:

$(function () {
    $("#ex4").slider({
        reversed: true
    });
});

... 我看到的只是一个带有圆角的输入文本框。我怀疑 jQuery-ui 在这里覆盖了滑块命令所以我也试过这个 JS:

$(function () {
    $("#ex4").bootstrapSlider();
});

.....我什么也没看到。 DOM 加载新的 HTML 但 none 是可见的。没有 CSS 隐藏任何这些，但是元素的高度都是 0 并且在 CSS 中手动将这些高度设置为更高的数字后，它们仍然不可见：

<div class="slider slider-vertical" id="">
   <div class="slider-track">
      <div class="slider-track-low" style="top: 0px; height: 0%;"></div>
      <div class="slider-selection" style="top: 0%; height: 8%;"></div>
      <div class="slider-track-high" style="bottom: 0px; height: 92%;"></div>
      <div class="slider-handle min-slider-handle round" tabindex="0" style="top: 8%;"></div>
      <div class="slider-handle max-slider-handle round hide" tabindex="0" style="top: 0%;"></div>
   </div>
   <div class="tooltip tooltip-main right" style="left: 100%; top: 8%; margin-top: -11.5px;">
      <div class="tooltip-arrow"></div>
      <div class="tooltip-inner">-3</div>
   </div>
   <div class="tooltip tooltip-min right" style="left: 100%;">
      <div class="tooltip-arrow"></div>
      <div class="tooltip-inner"></div>
   </div>
   <div class="tooltip tooltip-max right" style="left: 100%;">
      <div class="tooltip-arrow"></div>
      <div class="tooltip-inner"></div>
   </div>
</div>

我什至可以在这个空白的 space 中随意点击，然后在检查器中查看滑块值的变化！！！ 此类问题的其他答案包括按正确顺序排列脚本，我已经这样做了。某处是否存在版本不匹配？

没有控制台错误，也没有资源加载失败。

我正在使用 jQuery v 3.3.1 和 bootstrap v 3.3.7。

Answer 1

我觉得一切都很好，但我注意到在您的 head 元素中您有一个 bootstrap-slider.js 文件，但没有相应的 .css 文件。有没有你没有包括在内的可供你使用的？

bootstrap-尽管脚本以正确的顺序开始，但滑块不工作

bootstrap-slider not working despite scripts begin in correct order

html

jquery

twitter-bootstrap

bootstrap-slider