javascript - Bootstrap- slider 无法加载

标签 javascript jquery twitter-bootstrap bootstrap-slider

我正在尝试让示例 #2 从这里开始工作:http://seiyria.com/bootstrap-slider/

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-slider.css">
<link rel="stylesheet" href="css/jquery-ui.css">
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/jquery-ui-1.12.1.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap-slider.js"></script>

</head>
<body>
Filter by price interval: <b>€ 10</b> <input id="ex2" type="text" class="span2" value="" data-slider-min="10" data-slider-max="1000" data-slider-step="5" data-slider-value="[250,450]"/> <b>€ 1000</b>


</body>
</html>
<script>
$("#ex2").slider({});
</script>

发生了什么,它只是创建了一个小文本框而不是 slider 。如何才能使其正常显示?

最佳答案

删除您的<link rel="stylesheet" href="css/jquery-ui.css"><script src="js/jquery-ui-1.12.1.js"></script>他们正在覆盖 Bootstrap slider 行为。

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-slider.css">

<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap-slider.js"></script>

</head>
<body>
Filter by price interval: <b>€ 10</b> <input id="ex2" type="text" class="span2" value="" data-slider-min="10" data-slider-max="1000" data-slider-step="5" data-slider-value="[250,450]"/> <b>€ 1000</b>


</body>
</html>
<script>
$("#ex2").slider({});
</script>

关于javascript - Bootstrap- slider 无法加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42068067/

相关文章:

html - Bootstrap3 - 垂直居中对齐表格内容

javascript - 如何使用 Javascript 和 PHP 从浏览器连接到 WIFI?

html - 将按钮设置为与文本大小无关的相同大小

javascript - 如何链接 javascript 选择器

javascript - 如何从表单字段中获取值并在 Jquery 中与 url 连接

javascript - jQuery 表单验证不起作用,输入意外结束

javascript - 在javascript函数上添加多个变量?

javascript - 如何在显示后消失警报 div

javascript - 如果 "Undefined",则执行此操作,否则,使用数组和 .each() 执行此操作

javascript - Node - Request.js ECONNRESET 错误仅在服务器上