AngularJS編集プログレスバーをhtmlスライダーとして

Question

私はブートストラップの進捗バーを持っており、マウスクリックで値を編集したいと考えています。あなたはので、私はマウスでプログレスバーの同じ制御がしたいHTMLの範囲スライダ

<input type="range" min="1" max="100" value="50" class="slider" id="myRange"> 

のためにそれを編集することができますと同じように、実際に私が最後に考えた方がはるかに簡単だった[OK]を

Answer 1

をクリックします。私はprogressBarのためのブートストラップ角度指示を使用し、onClickイベントを処理しました。

コントローラ：

$ctrl.trackProgress = function(event) { 
     var fullProgressBarWidth = $(event.currentTarget).width(); 
     $ctrl.progressBarValue = event.offsetX/fullProgressBarWidth * 100;   
    }; 

テンプレート：

<div class="progress" ng-click="$ctrl.trackProgress($event)"> 
    <uib-progressbar value="$ctrl.progressBarValue">{{$ctrl.progressBarValue}}</uib-progressbar> 
</div>