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

Answer 1

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

尽管脚本以正确的顺序开始，bootstrap-slider仍无法正常工作

1 个答案: