Bootstrap-Slider令人討厭的表單字段

Question

我正在嘗試實現一個滑塊，但是出於這個原因，僅顯示一個輸入字段。

https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js

https://github.com/seiyria/bootstrap-slider

http://seiyria.com/bootstrap-slider/

我已經添加了：

bootstrap-slider.js
bootstrap-slider.css

除了一小段JS

<script type="text/javascript">
$('#ex1').slider({
    formatter: function(value) {
        return 'Current value: ' + value;
    }
});
</script>

代碼本身呢？

<input id="ex1" data-slider-id="ex1Slider" type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14"/>

請指教？

JS小提琴

Answer 1

您將需要包含jQuery，在包含bootstrap-slider.js之前添加它

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

在初始化滑塊之前，您還需要等待jQuery

<script type="text/javascript">
  $(document).ready(function() {
    $('#ex1').slider({
      formatter: function(value) {
        return 'Current value: ' + value;
      }
    });
  });
</script>