Ionic CSS Components
- Ionic - Padding
- Ionic - Icons
- Ionic - Grid
- Ionic - Tabs
- Ionic - Select
- Ionic - Range
- Ionic - Radio Button
- Ionic - Checkbox
- Ionic - Toggle
- Ionic - Forms
- Ionic - Cards
- Ionic - Lists
- Ionic - Buttons
- Ionic - Footer
- Ionic - Header
- Ionic - Content
- Ionic - Colors
Ionic Javascript Components
- Ionic - JS Tabs
- Ionic - JS Slide Box
- Ionic - JS Side Menu
- Ionic - JS Scroll
- Ionic - JS Popup
- Ionic - JS Popover
- Ionic - JS Navigation
- Ionic - JS Modal
- Ionic - JS Loading
- Ionic - JS List
- Ionic - JS Keyboard
- Ionic - JS Footer
- Ionic - JS Header
- Ionic - JS Events
- Ionic - JS Forms
- Ionic - JS Content
- Ionic - JS Backdrop
- Ionic - JS Action Sheet
Ionic Advanced Concepts
- Ionic - Splash Screen
- Ionic - Media
- Ionic - Geolocation
- Ionic - Native Audio
- Ionic - In App Browser
- Ionic - Facebook
- Ionic - Camera
- Ionic - AdMob
- Ionic - Cordova Integration
Ionic Useful Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Ionic - Range
Ionic range is used to choose and display the level of something. It will represent the actual value in co-relation to maximal and minimal value. Ionic offers a simple way of working with Range.
Using Range
Range is used as an inside item element. The class that is used is range. We will place this class after the item class. This will prepare a container where the range will be placed. After creating a container, we need to add input and assign the range type to it and the name attribute as well.
<span class = "item range"> <input type = "range" name = "range1"> </span>
The above code will produce the following screen −

Adding Icons
Range will usually require icons to display the data clearly. We just need to add icons before and after the range input to place them on both sides of the range element.
<span class = "item range"> <i class = "icon ion-volume-low"></i> <input type = "range" name = "volume"> <i class = "icon ion-volume-high"></i> </span>
The above code will produce the following screen −

Stypng Range
Our next example will show you how to style Range with Ionic colors. The color classes will use a range prefix. We will create a pst with nine ranges and style it differently.
<span class = "pst"> <span class = "item range range-pght"> <input type = "range" name = "volume"> </span> <span class = "item range range-stable"> <input type = "range" name = "volume"> </span> <span class = "item range range-positive"> <input type = "range" name = "volume"> </span> <span class = "item range range-calm"> <input type = "range" name = "volume"> </span> <span class = "item range range-balanced"> <input type = "range" name = "volume"> </span> <span class = "item range range-energized"> <input type = "range" name = "volume"> </span> <span class = "item range range-assertive"> <input type = "range" name = "volume"> </span> <span class = "item range range-royal"> <input type = "range" name = "volume"> </span> <span class = "item range range-dark"> <input type = "range" name = "volume"> </span> </span>
The above code will produce the following screen −
