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>