2017-02-06 5 views
0

Я пытаюсь получить пример # 2, чтобы работать здесь: http://seiyria.com/bootstrap-slider/Bootstrap-слайдер не загрузит

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

Что происходит это только создает небольшое текстовое поле вместо ползунка. Как я могу отобразить его правильно?

+0

проверьте свою консоль. видите ли вы какие-либо ошибки? – fernando

+0

http://i.imgur.com/mflut3R.png – crystyxn

ответ

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>