Ionic Range

From WikiOD

Ionic Range[edit | edit source]

Ionic Range is a slider control. Ionic provides a variety of default styles for Range. And you can use it in many kinds of elements such as lists or cards.

Instance[edit | edit source]
 <code><div class="range"></code>
   <code><i class="icon ion-volume-low"></i></code>
   <input type="range" name="volume">
   <code><i class="icon ion-volume-high"></i></code>
 <code></div></code>
 
 <code><div class="list" style="margin-top: 13px"></code>
   <code><div class="item item-divider"></code>
     Ranges In A List
   <code></div></code>
   <code><div class="item range range-positive"></code>
     <code><i class="icon ion-ios-sunny-outline"></i></code>
     <input type="range" name="volume" min="0" max="100" value="12">
     <code><i class="icon ion-ios-sunny"></i></code>
   <code></div></code>
   <code><div class="item range range-calm"></code>
     <code><i class="icon ion-ios-lightbulb-outline"></i></code>
     <input type="range" name="volume" min="0" max="100" value="25">
     <code><i class="icon ion-ios-lightbulb"></i></code>
   <code></div></code>
   <code><div class="item range range-balanced"></code>
     <code><i class="icon ion-ios-bolt-outline"></i></code>
     <input type="range" name="volume" min="0" max="100" value="38">
     <code><i class="icon ion-ios-bolt"></i></code>
   <code></div></code>
   <code><div class="item range range-energized"></code>
     <code><i class="icon ion-ios-moon-outline"></i></code>
     <input type="range" name="volume" min="0" max="100" value="50">
     <code><i class="icon ion-ios-moon"></i></code>
   <code></div></code>
   <code><div class="item range range-assertive"></code>
     <code><i class="icon ion-ios-partlysunny-outline"></i></code>
     <input type="range" name="volume" min="0" max="100" value="63">
     <code><i class="icon ion-ios-partlysunny"></i></code>
   <code></div></code>
   <code><div class="item range range-royal"></code>
     <code><i class="icon ion-ios-rainy-outline"></i></code>
     <input type="range" name="volume" min="0" max="100" value="75">
     <code><i class="icon ion-ios-rainy"></i></code>
   <code></div></code>
   <code><div class="item range range-dark"></code>
     <code><i class="icon ion-ios-lightbulb-outline"></i></code>
     <input type="range" name="volume" min="0" max="100" value="88">
     <code><i class="icon ion-ios-lightbulb"></i></code>
   <code></div></code>
 <code></div></code>