ionic Range 是一个滑块控件，ionic 为 Range 提供了很多种默认的样式。而且你可以在许多种元素里使用它比如列表或者 Card 。
| <html ng-app="ionicApp"> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> |
| <title>芝麻教程(web3.xin)</title> |
| <link href="/ionic/css/ionic.min.css" rel="stylesheet"> |
| <script src="/ionic/js/ionic.bundle.min.js"></script> |
| </head> |
| <body> |
| <div class="bar bar-header"> |
| <div class="h1 title">Range（滑块控件）</div> |
| </div> |
| <div class="content-wrapper"> |
| <div class="content has-header padding-top"> |
| <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> |
| </div> |
| </div> |
| </body> |
| </html> |
