jqueryhtmltwitter-bootstrapbootstrap-slider

bootstrap-slider not working despite scripts begin in correct order

My <head> tag has: 

<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
    });
});

... All I see is an input text box with rounded corners. I suspect that jQuery-ui is overriding the slider command here so I've also tried this JS:

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

.... and I see nothing. The DOM loads new HTML but none of it is visible. There is no CSS hiding any of this, but the heights of the elements are all 0 and after manually setting these heights to higher numbers in the CSS, they are still not visible:

<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>

I can even click around in this empty space in random places and see the values for the slider change in the inspector!!! The other answers to questions like this include putting scripts in the correct order, which I have done. Is there a version mismatch somewhere?

There are no console errors and no resources fail to load.

I am using jQuery v 3.3.1 and bootstrap v 3.3.7.

Solution

  • Everything looks good to me, but I notice in your head element you have a bootstrap-slider.js file without a corresponding .css file. Is there one available to you that you're not including?