点击运行
<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>千木教程(qianmu.net)</title> <link href="https://cdn.staticfile.org/ionic/1.3.2/css/ionic.css" rel="stylesheet"> <script src="https://cdn.staticfile.org/ionic/1.3.2/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>
运行结果
