range-ionic

The range is used in many e-commerce applications to choose the price range. Ionic offers the same to achieve this. It's just a bar. We can easily drag to change the value.

So the min value is 0 and max value is 100. It is used with an input element.


<div class="item range">

 <i class="icon ion-volume-low"></i>

 <input type="range" name="volume">

 <i class="icon ion-volume-high"></i></div>

 <div class="list">

 <div class="item range range-positive">

    <i class="icon ion-ios-sunny-outline"></i>

    <input type="range" name="volume" min="0" max="100" value="33">

    <i class="icon ion-ios-sunny"></i>

</div>

</div>

In the above example, the icons are added on both sides. It depicts volume up and down(just for an illustration).

If you want an action when the range is changed, you must bind the input field with AngularJS.