Bootstrap 输入滑块 - 非常基本的设置

Question

我正在为 bootstrap 左右的输入滑块尝试一个非常基本的设置，但不知何故我无法让它工作。

我想要的：

我得到的是：

来源/工作示例/教程：

我的代码/来源/错误：

<html>
<head>

    <link rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.9.0/css/bootstrap-slider.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">


</head>
<body>

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


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

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.9.0/bootstrap-slider.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>

注：

我从网络存储库中提取了所有基本组件 (CSS/JS)：bootstrap、bootstrap-slider 和 JQuery。

Answer 1

这里我帮你修好了。 https://jsfiddle.net/k5k9aa70/

您的脚本执行顺序不正确，slider 未被识别为函数。

Bootstrap 输入滑块 - 非常基本的设置

Bootstrap Input Slider - very basic setup

javascript

bootstrap-slider

bootstrap-4