如何在離子框架中滑動範圍滑塊時顯示值？

我希望我的代碼在滑動我的離子應用程序中的滑塊時顯示範圍值（在滑塊本身上）。如何在離子框架中滑動範圍滑塊時顯示值？

我滑塊的代碼是：

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

需要在我的代碼什麼樣的變化？

來源

2016-05-02 Himanshu K

嘗試：「銷」屬性：\t 如果爲真，當按下旋鈕時具有整數值的銷被示出。默認爲false。請參閱：https：//ionicframework.com/docs/api/components/range/Range/#input-properties –

您可以在NG-模型在HTML任何地方{{sliderrange}}這樣添加到輸入例如ng-model="sliderrange"，並顯示如下：

<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中。否則，該值將在用戶首次使用滑塊後顯示。

來源

2016-05-02 06:27:06 thepio

在離子3中，我已經達到了這樣的效果。

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

來源

2018-03-10 17:22:24 yohoprashant

如何在離子框架中滑動範圍滑塊時顯示值？

回答

相關問題