私は初心者のWeb開発者です。私はバウワー付きのseiyria-bootstrap-sliderをインストールしました。私は問題を持っているように思えます。以下の基本的な命令セットに従って、プラグインCSSとJavaScriptをWebページにロードしました。/setup seiyria-bootstrap-sliderの使い方は？

以下は、別のページ間をナビゲートするために角度経路を使用するindex.htmlです。私は何かが欠けていると信じています。また、私が定義したスライダー要素があります。要素はブラウザ（Chrome）に表示されますが、そのnobは移動できません。

何か手掛かりがあります。

ありがとうございます。

基本設定

あなたのウェブページにプラグインCSSとJavaScriptをロードし、すべてが動作するはずです！

ブートストラップ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&nbsp;{{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>

出典

2016-09-02 user1941390

通常、最小の使用例があり、jsfiddleを使用して設定する必要があります。それはあなたの環境との問題を切り離すのに役立ちます。つまり、私たちのレポにはあなたのために働くべき多くの例があります。それが役に立つかもしれないと思われるものは 'data-provide =" slider "を使っていますが、実際にはそれをすべて読んでみたいとは思いません。 – Seiyria

index.htmlを。しかし、以下の自己完結型の例に基づいて修正しました。それが他の人にも役立つことを願っています

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

出典

2016-09-03 06:27:17 user1941390

@Seiyriaはコメントを追加すること自由に感じる、私は何かを逃した可能性があります。 – user1941390

また、AngularJSコントローラ変数を使用することができますか？ – user1941390

解決策が見つかりました[ここ]（https://github.com/seiyria/angular-bootstrap-slider） – user1941390

/setup seiyria-bootstrap-sliderの使い方は？

基本設定

私は正確に問題を特定することができませんでした

要素

答えて

関連する問題