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 とブートストラップ v 3.3.7 を使用しています。

4

1 に答える 1