0
我需要更改onsen-ui中范围滑块的最大值和最小值。默认情况下,它看起来是从0到100(从最小到最大)。有什么方法可以编辑这些值吗?更改范围滑块的最大/最小值
我需要更改onsen-ui中范围滑块的最大值和最小值。默认情况下,它看起来是从0到100(从最小到最大)。有什么方法可以编辑这些值吗?更改范围滑块的最大/最小值
您可以在<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>
没有。 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>
谢谢,它的工作原理。我最终只使用了noUIslider,因为onsen-ui的范围滑块在某种程度上非常糟糕。 – bhlee