| ylbtech-ionic-CSS：ionic Range |
| 1.返回顶部 |
1、
ionic Range
ionic Range 是一个滑块控件，ionic 为 Range 提供了很多种默认的样式。而且你可以在许多种元素里使用它比如列表或者 Card 。
实例
<div class="range"> ?<i class="icon ion-volume-low"></i> ?<input type="range" name="volume"> ?<i class="icon ion-volume-high"></i></div><div class="list" style="margin-top: 13px"> ?<div class="item item-divider"> ???Ranges In A List ?</div> ?<div class="item range range-positive"> ???<i class="icon ion-ios-sunny-outline"></i> ???<input type="range" name="volume" min="0" max="100" value="12"> ???<i class="icon ion-ios-sunny"></i> ?</div> ?<div class="item range range-calm"> ???<i class="icon ion-ios-lightbulb-outline"></i> ???<input type="range" name="volume" min="0" max="100" value="25"> ???<i class="icon ion-ios-lightbulb"></i> ?</div> ?<div class="item range range-balanced"> ???<i class="icon ion-ios-bolt-outline"></i> ???<input type="range" name="volume" min="0" max="100" value="38"> ???<i class="icon ion-ios-bolt"></i> ?</div> ?<div class="item range range-energized"> ???<i class="icon ion-ios-moon-outline"></i> ???<input type="range" name="volume" min="0" max="100" value="50"> ???<i class="icon ion-ios-moon"></i> ?</div> ?<div class="item range range-assertive"> ???<i class="icon ion-ios-partlysunny-outline"></i> ???<input type="range" name="volume" min="0" max="100" value="63"> ???<i class="icon ion-ios-partlysunny"></i> ?</div> ?<div class="item range range-royal"> ???<i class="icon ion-ios-rainy-outline"></i> ???<input type="range" name="volume" min="0" max="100" value="75"> ???<i class="icon ion-ios-rainy"></i> ?</div> ?<div class="item range range-dark"> ???<i class="icon ion-ios-lightbulb-outline"></i> ???<input type="range" name="volume" min="0" max="100" value="88"> ???<i class="icon ion-ios-lightbulb"></i> ?</div></div>
运行效果如下：
2、
| 2.返回顶部 |
| 3.返回顶部 |
| 4.返回顶部 |
| 5.返回顶部 |
1、
http://www.runoob.com/ionic/ionic-range.html
2、
| 6.返回顶部 |
| 作者：ylbtech 出处：http://ylbtech.cnblogs.com/ 本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。 |
ionic-CSS：ionic Range
原文地址：https://www.cnblogs.com/storebook/p/9004032.html