ionic基础教程
ionic 安装
ionic 创建 APP
ionic CSS
ionic 头部与底部
ionic 按钮
ionic 列表
ionic 卡片
ionic 表单和输入框
ionic Toggle(切换开关)
ionic 复选框
ionic 单选框
ionic Range
ionic select
ionic tab(选项卡)
ionic 网格(Grid)
ionic 颜色
ionic JavaScript
ionic 上拉菜单(ActionSheet)
ionic 背景层
ionic 下拉刷新
ionic 复选框
ionic 切换开关操作
ionic 手势事件
ionic 头部和底部
ionic 列表操作
ionic 加载动作
ionic 模型
ionic 导航
ionic 平台
ionic 浮动框
ionic 对话框
ionic 滚动条
ionic 侧栏菜单
ionic 滑动框
ionic 加载动画
ionic 选项卡栏操作
©
本文档使用 PHP中文网手册 发布
文字
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>