ionic中滑动条 : .range input[type="range"]
作者:本站编辑 发布时间:2015-11-24 来源:本站原创
点击数:
滑动条 : .range input[type="range"]
range是HTML5新引入的元素，常用来进行连续值的调节：
从上图可以看到，滑动条的可视部件包括三部分：左右图标和中间的滑动条。 图标是可选的，当不用图标时，滑动条将占据整个宽度。
在ionic中，使用如下HTML模板声明滑动条：
<any class="range"> <any class="icon {left-icon-name}"></any> <input name="{range-name}" type="range"> <any class="icon {right-icon-name}"></any></any>使用.range-{color}样式声明滑动条的配色方案，这主要影响滑轨的颜色。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
<link rel="stylesheet" type="text/css" href="ionic.min.css">
</head>
<body>
<div class="bar bar-header bar-stable">
<button class="button button-clear button-positive icon ion-ios-arrow-left">设置</button>
<h1 class="title">声音</h1>
</div>
<div class="scroll-content has-header">
<div class="list">
<div class="item item-divider">铃声和提醒</div>
<div class="item range range-positive">
<i class="icon ion-ios-volume-low"></i>
<input type="range" name="volume" value=30>
<i class="icon ion-ios-volume-high"></i>
</div>
<div class="item item-toggle">
用按钮调整
<label class="toggle toggle-balanced">
<input type="checkbox" checked>
<div class="track">
<div class="handle"></div>
</div>
</label>
</div>
</div>
</div>
</body>
</html>