尽管脚本以正确的顺序开始，但引导滑块不起作用答案

【问题标题】：bootstrap-slider not working despite scripts begin in correct order尽管脚本以正确的顺序开始，但引导滑块不起作用
【发布时间】：2018-02-22 03:51:50
【问题描述】：

我的<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，但没有一个是可见的。没有 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>

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

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

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

【问题讨论】：

您在控制台中看到任何错误吗？还要检查您的网络选项卡，看看是否所有资源都已正确加载。
没有控制台错误，也没有资源加载失败。
创建一个实际的 jsfiddle。

标签： jquery html twitter-bootstrap bootstrap-slider

【解决方案1】：

在我看来一切都很好，但我注意到在你的 head 元素中你有一个 bootstrap-slider.js 文件，没有对应的 .css 文件。有没有你不包括的可用的？

【讨论】：