更改範圍滑塊的最大/最小值

Question

我需要更改onsen-ui中範圍滑塊的最大值和最小值。默認情況下，它看起來是從0到100（從最小到最大）。有什麼方法可以編輯這些值嗎？

Answer 1

您可以在<input>標記中設置min和max屬性。

<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/js/angular/angular.min.js"></script> 
 
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/js/onsenui.min.js"></script> 
 
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/css/onsen-css-components.css" rel="stylesheet"/> 
 
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/css/onsenui.css" rel="stylesheet"/> 
 

 
<script> 
 
    ons.bootstrap(); 
 
</script> 
 
    <ons-page ng-init="slider=30"> 
 

 
     <ons-toolbar> 
 
     <div class="center"> 
 
      Ranges 
 
     </div> 
 
     </ons-toolbar> 
 

 
     <ons-icon icon="fa-volume-down" class="lower"></ons-icon> 
 
     <input type="range" min="20" max="60" class="range" ng-model="slider"> 
 
     <ons-icon icon="fa-volume-up"></ons-icon> 
 
     <p>{{slider}}</p> 
 
    </ons-page>

Answer 2

沒有。 Ons範圍的值從0到100.您可以使用value屬性將默認值設置爲範圍。所以，如果你想改變範圍值，你可以用ng-model做一些數學論文。例如我在下面的例子中設置了範圍最小= 10和最大= 300，縮放因子= 10：

<script> 
    ons.bootstrap(); 
</script> 
    <ons-page> 
Range in meters: <ons-range value="10" ng-model="range"></ons-range> 
{{(((range*10)>=10&&(range*10)<=300)&&range*10+'meters')||(....)}} 

    </ons-page>