显示表单字段的引导滑块

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 Fiddle

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>