Bootstrap-slider无法加载

时间:2017-02-06 12:40:39

标签: 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>

它会发生什么,只是创建一个小文本框而不是滑块。如何正确显示?

1 个答案:

答案 0 :(得分:2)

删除<link rel="stylesheet" href="css/jquery-ui.css"><script src="js/jquery-ui-1.12.1.js"></script>它们会覆盖引导滑块行为。

<!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>