AngularJSでjQuery範囲スライダを実装する方法

私は既存のAngularJSアプリケーションでanuglar-sliderを使用しようとしています。AngularJSでjQuery範囲スライダを実装する方法

私はhere

著者のコメントが続い私は著者のgithubのから（headタグ内）のファイルの下にダウンロードされ、私のindex.html

HTMLコードに追加：

<head> 

<link rel="stylesheet" href="css/angular-slider.css"> 
<script src="js/vendor/angular-slider.js"></script> 

</head> 
<body> 

    <slider floor="10" ceiling="60" ng-model-low="lowValue" ng-model-high="highValue"></slider> 

</body>

アプリケーション。 js（角度コード）。私は著者の指示に従って二行目を追加し、私は私がブラウザで任意のスライダーのレンダリングが表示されていない

var app = angular.module('myApp', []) 
angular.module('uiSlider', []); 

app.constant('Config', 
{ 
    baseURL : "http://blah", 
    httpTimeout : 36000 
}); 
app.config(function($logProvider) { 
    $logProvider.debugEnabled(true); 
}); 
//and some other app specific code follows

が何か間違ったことをしたんだと思います。しかし、アプリケーションのAngular固有の古い機能はまだ機能しており、ブラウザのコンソールにエラーはありません。

上記の問題が見つからない場合は、範囲スライダーをAngularJSアプリで実装する他の方法をお勧めします。

私は、私のようなあなたがここにも著者のライブラリファイルのコードを投稿する場合、私に教えてくださいAngularJS

にかなり新しいです。

出典

2013-06-14 Watt

ページ上にエラーがありますか？ – WooCaSh

愚かな質問ですが尋ねる必要があります。 'angular'ライブラリも含めましたか？ – WooCaSh

はい、しました。それが他のすべてのものがまだ動作する理由です。質問を読めるようにするために、私は 'index.html' – Watt

[OK]を私はこれを準備するとき、いくつかの問題が見つかりましたが、今では働いている：

設立トラブル：

を、それはあなたがslider-template.htmlファイル
を持っている必要があり、好きangularjsバージョン1.1.4 or higher
が必要です@パスカルは、あなたにuiSliderを含める必要があると言った：
```
var app = angular.module('myApp', ['uiSlider']) 
```
下記のデモ用に準備しました。私はそれはあなたが

DEMO

出典

2013-06-14 17:14:19 WooCaSh

+1。コードありがとう。私は逃したものを見るためにテストします。 – Watt

これは画面に表示されます。 'floor =" 0.0 "ceiling =" 1.0 "'を設定すると、スライドしません。私はそれを調べている。もしあなたがそれについてコメントできるなら、大きな助けになるでしょう。 – Watt

@Wattあなたは0から1の範囲の権利が欲しいですか？ – WooCaSh

最近、私はangularJS範囲スライダを使用しているのに役立ちます願っています。空想のスライダまたはスライダディレクティブを使用する場合。あなたは下からそれを得るでしょう。

AngularJS slider directive with no external dependencies

シンプルなスライダー
レンジカスタムスタイルで
スライダースライダー
動的選択バーの色とスライダー
カスタム床とスライダーのようなスライダーの多くの種類があります。/ceil/step
スライダ付きダニ

モバイルフレンドリーでカスタマイズが簡単です。

jQueryを使用して単純なスライダを使用しました。コードを以下に示します。

<form> 
    <div class="choose_industry"> 
     <div class="form-group"> 
      <label class="control-label col-xs-12 col-sm-4 col-md-2 col-lg-2 " for="name">What Industry?</label> 
      <div class="col-xs-12 col-sm-8 col-md-10 col-lg-10"> 
       <div class="radio col-xs-6 col-sm-6 col-md-6 col-lg-6"> 
        <input type="radio" name="radio1" id="radio1" value="cdl" ng-model="leg_ser.industry"> 
        <label for="radio1"> 
         Commercial Trucking Transportation 
        </label> 
       </div> 
       <div class="radio col-xs-6 col-sm-6 col-md-6 col-lg-6"> 
        <input type="radio" name="radio1" id="radio2" value="non_cdl" ng-model="leg_ser.industry"> 
        <label for="radio2"> 
         Other Industries 
        </label> 
       </div> 
      </div> 
     </div> 
    </div> 

    <div class="employee_counting"> 
     <div class="form-group col-xs-12 col-sm-4 col-md-4 col-lg-4"> 
      <label class="control-label" for="name">Number of Employees?</label> 
      <div class="input-group"> 
       <span class="input-group-addon"><i class="fa fa-user"></i></span> 
       <input type="number" class="form-control" placeholder="Employees" name="Number of Employees" ng-model="leg_ser.num_of_emp"> 
       <!-- <span>Total Number of Employees</span> --> 
      </div> 

      <div class="range_slider"> 
       <span class="pull-left">0</span> 
       <span class="pull-right">25k</span> 
       <div id="slidecontainer"> 
        <input type="range" min="0" max="25000" value="0" class="slider" id="myRange" ng-model="leg_ser.num_of_emp"> 
       </div> 
      </div> 
     </div> 
     <div class="form-group col-xs-12 col-sm-4 col-md-4 col-lg-4"> 
      <label class="control-label" for="name">Enrollment Percentage (%)?</label> 
      <div class="input-group"> 
       <span class="input-group-addon"><i class="fa fa-percent"></i></span> 
       <input type="number" class="form-control" placeholder="Percentage" name="Enrollment Percentage" ng-model="leg_ser.enroll_per"> 
       <!-- <span>Estimated Percentage that will enroll</span> --> 
      </div> 

      <div class="range_slider"> 
       <span class="pull-left">0%</span> 
       <span class="pull-right">100%</span> 
       <div id="slidecontainer"> 
        <input type="range" min="1" max="100" value="1" class="slider" id="myRange" ng-model="leg_ser.enroll_per"> 
       </div> 
      </div> 
     </div> 
     <div class="form-group col-xs-12 col-sm-4 col-md-4 col-lg-4"> 
      <label class="control-label" for="name">Annual Cost per Employees?</label> 
      <div class="input-group"> 
       <span class="input-group-addon"><i class="fa fa-dollar"></i></span> 
       <input type="number" class="form-control" placeholder="Cost" name="Annual Cost per Employees" ng-model="leg_ser.annual_cost"> 
       <!-- <span>Avarage Salary and benifits per Employee</span> --> 
      </div> 

      <div class="range_slider"> 
       <span class="pull-left">$0</span> 
       <span class="pull-right">$300k</span> 
       <div id="slidecontainer"> 
        <input type="range" min="0" max="300000" value="0" class="slider" id="myRange" ng-model="leg_ser.annual_cost"> 
       </div> 
      </div> 
     </div> 
    </div> 
</form>

私にとっては良い作業スクリプトタグ内のスクリプト上記

<!-- RANGE SLIDER JS START --> 
<script> 
var slider = document.getElementById("myRange"); 
var output = document.getElementById("demo"); 
output.innerHTML = slider.value; 

slider.oninput = function() { 
    output.innerHTML = this.value; 
} 
</script> 
<!-- RANGE SLIDER JS OVER -->

を次のコードを追加、あまりにもあなたのために働く必要があります。

出典

2017-11-15 10:49:30

AngularJSでjQuery範囲スライダを実装する方法

答えて

関連する問題