イオンフレームワークでレンジスライダをスライドさせながら値を表示する方法は？

Question

マイナスイオンアプリでスライダーをスライドさせているときに、コードが範囲値（スライダー自体に）を表示したい。

マイスライダーコードは次のとおりです。

<h5>Scale</h5> 
    <div class="item range"> 
     <i>1</i> 
     <input type="range" id="inputRange" name="volume" min="1" max="10"> 
     <i>10</i> 
    </div> 

私のコードで必要とされるどのような変更？

Answer 1

あなたは一例ng-model="sliderrange"の入力にNG-モデルを追加し、任意の場所にこのような{{sliderrange}}であなたのhtmlでこれを表示することができます。

<h5>Scale</h5> 
<div class="item range"> 
    <i>1</i> 
    <input type="range" id="inputRange" ng-model="sliderrange" name="volume" min="1" max="10"> 
    <i>10</i>  
</div> 

{{sliderrange}} 

私はまた、例えば$scope.sliderrange = 5;であなたのコントローラに値を設定することをお勧めします値はスコープinitに表示されます。それ以外の場合は、ユーザーが最初にスライダを使用した後に値が表示されます。

Answer 2

イオン3では、このように達成しました。

<ion-badge>{{knobValues}}</ion-badge> 
<ion-range min="1" max="100" step="1" [(ngModel)]="knobValues"></ion-range>