Как использовать / настроить seiyria-bootstrap-slider?
Признаюсь, я начинающий веб-разработчик. Я только что установил seiyria-bootstrap-слайдер с беседкой. Кажется, у меня есть проблема заставить его работать. Я загрузил плагин CSS и JavaScript на мою веб-страницу согласно приведенному ниже базовому набору инструкций.
Ниже мой index.html, из которого я использую angular-route для навигации между разными страницами. Я верю, что что-то упустил. Кроме того, ниже есть элемент слайдера, который я определил. Элемент отображается в браузере (Chrome), но его элементы не являются подвижными.
Любая подсказка очень ценит это.
Большое спасибо.
Базовая настройка
Загрузите плагин CSS и JavaScript на свою веб-страницу, и все должно работать!
Не забудьте загрузить код плагина после загрузки Bootstrap CSS и JQuery.
JQuery не является обязательным, и плагин может работать с или без него.
Посмотрите ниже, чтобы увидеть пример того, как взаимодействовать с не-JQuery интерфейсом.
Все еще не могу заставить его работать.
Index.html
<html data-ng-app="eynakestanApp">
<head>
<title>Eynakestan</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- SCROLLS -->
<!-- load bootstrap and fontawesome via CDN -->
<link href="/static/scripts/bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="/static/content/font-awesome.css" rel="stylesheet" />
<link href="/static/content/bootsnipp.min.css" rel="stylesheet"/>
<link href="/static/content/site.css" rel="stylesheet" />
<link href="/static/scripts/bower_components/seiyria-bootstrap-slider/dist/css/bootstrap-slider.css" rel="stylesheet" />
<!-- SPELLS -->
<!-- load angular via CDN -->
</head>
<!-- define angular controller -->
<body ng-controller="mainController">
<!-- HEADER AND NAVBAR -->
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/" style="font-size: x-large; font-weight: bold;">Eynakestan</a>
</div>
<ul class="nav navbar-nav ">
<li><a href="#/"><i class="fa fa-home"></i> Home</a></li>
<li><a href="#product"><i class="fa fa-eye"></i> Product</a></li>
<li><a href="#userlist"><i class="fa fa-user"></i> User List</a></li>
<li><a href="#about"><i class="fa fa-shield"></i> About</a></li>
<li><a href="#contact"><i class="fa fa-comment"></i> Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#compare"><span class="glyphicon glyphicon-adjust"></span> Compare</a></li>
<li><a href="#favorites"><span class="glyphicon glyphicon-heart"></span> Favorites</a></li>
<li><a href="#shoppingcart"><span class="glyphicon glyphicon-shopping-cart"></span> Shopping Cart</a></li>
<li><a href="#signup" ng-show="Username==''"><span class="glyphicon glyphicon-user"></span> Sign-Up</a></li>
<li><a href="#signin" ng-show="Username==''"><span class="glyphicon glyphicon-log-in"></span> Sign-in</a></li>
<li><a href="#/" ng-show="Username!=''"><span class="glyphicon glyphicon-user"></span> Hi {{Username}}!</a></li>
<li><a href="" ng-click="SignOut()" ng-show="Username!=''" ><span class="glyphicon glyphicon-log-out"></span> Sign-Out</a></li>
</ul>
</div>
</nav>
</header>
<!-- MAIN CONTENT AND INJECTED VIEWS -->
<div id="main">
<div ng-view></div>
<!-- angular templating -->
<!-- this is where content will be injected -->
</div>
<script src="/static/scripts/bower_components/angular/angular.min.js"></script>
<script src="/static/scripts/bower_components/angular-route/angular-route.js"></script>
<script src="/static/scripts/script.js"></script>
<script src="/static/scripts/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/static/scripts/bower_components/seiyria-bootstrap-slider/src/js/bootstrap-slider.js"></script>
</body>
</html>
Элемент
Filter by price interval:<br>
<b>€ 10</b>
<div class="slider slider-horizontal" id="">
<div class="slider-track">
<div class="slider-track-low" style="left: 0; width: 19.697%;"></div>
<div class="slider-selection" style="left: 19.697%; width: 52.0202%;"></div>
<div class="slider-track-high" style="right: 0; width: 28.2828%;"></div>
</div>
<div class="tooltip tooltip-main top" role="presentation" style="left: 45.7071%; margin-left: -33.5px;">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">205 : 720</div>
</div>
<div class="tooltip tooltip-min top" role="presentation" style="left: 19.697%; margin-left: 0; display: none;">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">205</div>
</div>
<div class="tooltip tooltip-max top" role="presentation" style="left: 71.7172%; margin-left: 0; display: none;">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">720</div>
</div>
<div class="slider-handle min-slider-handle round" role="slider" aria-valuemin="10" aria-valuemax="1000" aria-valuenow="205" tabindex="0" style="left: 19.697%;"></div>
<div class="slider-handle max-slider-handle round" role="slider" aria-valuemin="10" aria-valuemax="1000" aria-valuenow="720" tabindex="0" style="left: 71.7172%;"></div>
</div>
<input id="ex2"
type="text"
class="span2"
value="205,720"
data-slider-min="10"
data-slider-max="1000"
data-slider-step="5"
data-slider-value="[250,450]"
data-value="205,720"
style="display: none;">
<b>€ 1000</b>
1 ответ
Я не мог точно определить проблему. Но я исправил это на основе приведенного ниже автономного примера. Я надеюсь, что это помогает другим.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"/>
<link href="../content/bootstrap.css" rel="stylesheet"/>
<title></title>
<script src="../scripts/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="../scripts/bower_components/jquery/dist/jquery.min.js"></script>
<link href="../scripts/bower_components/seiyria-bootstrap-slider/dist/css/bootstrap-slider.min.css" rel="stylesheet" />
<script src="../scripts/bower_components/seiyria-bootstrap-slider/dist/bootstrap-slider.min.js"></script>
</head>
<body>
<input id="myslider"
type="text"
class="span2"
value="5,10"
data-slider-id="myslider"
data-slider-min="2"
data-slider-max="20"
data-slider-step="2"
data-slider-value="[5,10]"
data-value="5,10"
/>
<p id="slider"></p>
<script language="javascript">
var mySlider = new Slider('#myslider');
mySlider.on('slideStop', function(value) {
document.getElementById('slider').innerHTML = value;
});
</script>
</body>
</html>