手册
目录
收藏456
分享
阅读28095
更新时间2022-04-11
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>
运行效果如下:

相关
视频
RELATED VIDEOS
科技资讯
1
2
3
4
5
6
7
8
9
精选课程
共5课时
17.3万人学习
共49课时
77.4万人学习
共29课时
62万人学习
共25课时
39.5万人学习
共43课时
71.2万人学习
共25课时
61.9万人学习
共22课时
23.1万人学习
共28课时
34.1万人学习
共89课时
125.7万人学习