ionicCSS05_切换开关和滑块

头部导入ionic.min.CSS

1.ionic Toggle(切换开关)

           切换开关类似与 HTML 的 checkbox 标签，但它更易于在移动设备上使用。切换开关可以使用 toggle-assertive 来指定颜色。

           注意：该实例有是多个切换开关列表。注意，每个选项的 item 类后需要添加 item-toggle 类。

           checked=""选中，默认不选中

<div class="content ">		单个开关		<label class="toggle toggle-assertive">			       <input type="checkbox" checked="">			       <div class="track">			         <div class="handle"></div>			       </div>		</label>		多个开关		<ul class="list">			<li class="item item-toggle">			     我心依旧1			     <label class="toggle toggle-assertive">			       <input type="checkbox" checked="">			       <div class="track">			         <div class="handle"></div>			       </div>			     </label>			</li>			<li class="item item-toggle">			    我心依旧2			     <label class="toggle toggle-balanced">			       <input type="checkbox">			       <div class="track">			         <div class="handle"></div>			       </div>			     </label>			</li>		</ul>	</div>
2.滑块控件
           onicRange 是一个滑块控件，ionic 为 Range 提供了很多种默认的样式。而且你可以在许多种元素里使用它比如列表或者 Card
<div class="content">		<div class="list">          <div class="item item-divider">            滑块列表          </div>    	<div class="range">          <i class="icon ion-volume-low"></i>          <input type="range" name="volume" min="0" max="100" value="2">          <i class="icon ion-volume-high"></i>        </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>	</div>