0

我的<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。

4

1 回答 1

1

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

于 2018-02-21T19:51:50.627 回答