我承认我是新手网络开发者。我刚刚用凉亭安装了seiyria-bootstrap-slider。我似乎有一个问题让它工作。我按照以下基本指令集将插件CSS和JavaScript加载到我的网页中。
下面是我的index.html，我使用angular-route在不同页面之间导航。我相信我错过了一些东西。另外，下面是我定义的滑块元件。该元素显示在浏览器（Chrome）中，但它的nobs不可移动。
任何线索都非常感激。
非常感谢。
将插件CSS和JavaScript加载到您的网页中，一切都应该有效！
请记住在加载Bootstrap CSS和JQuery之后加载插件代码。
JQuery是可选的，插件可以在有或没有的情况下运行。
下面看一下如何与非JQuery界面进行交互的示例。
仍然无法让它发挥作用。
<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>
答案 0 :(得分：0)
我无法准确找出问题所在。但是，我根据以下自成一体的例子修复了它。我希望它也有助于其他人。
<!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>