Using Range Classes In Ionic Blank App Using Visual Studio 2015

Before reading this article, please go through the article links given below.

Apache Cordova

Apache Cordova is an open source project that aims at letting mobile developers build applications for all major mobile platforms using HTML, CSS, and JavaScript technologies.

Ionic Framework

Ionic is a powerful HTML5 SDK that helps you build native-feeling mobile apps using web technologies, like HTML, CSS, and JavaScript.

Building Ionic Blank App with different Ionic Range Classes in Visual Studio 2015

Let's see how Ionic Framework makes the use of Ionic Range Control. The Range Control allows you to pick a numeric value by dragging a thumb along a horizontal or vertical line. Ionic range is used to choose and display the level of something.

A Range Control consists of a scale, defined by the Min and Max properties, and a "thumb," which the end user can manipulate, using mouse or arrow keys. At the runtime, the Min and Max properties can be dynamically reset to reflect a new range of values. The Value property returns the current position of the thumb. Ionic Framework offers different types to make their usage easy.

Let’s see how to use the Range Class with Ionic blank apps.

Prerequisites

Visual Studio 2015
Visual Studio Tools for Apache Cordova.

Follow the below steps to use the Range Class in Ionic Blank apps, using Ionic Framework

Step 1 Create an Ionic Blank App

Let’s get ready to create a new project. Open Visual Studio 2015 and click File -> New -> Project option for creating Ionic blank app.

Step 2 Giving the Project Name

Then, the "New Project" window will open. There, select Installed -> Template -> Java Script -> Apache Cordova Apps ->Ionic JavaScript Blank.

Type the project name, such as Ionic-RangeApp and click the OK button.

Step 3

The main screen

Step 4

Adding Range Control

Go to the Solution Explorer and choose "index.html". This is the starting screen of your app. We can add our HTML coding here.

Creating the Ionic Range

In HTML, we use divider input tag for range. The range lies inside the item element. The class that is used is "range". We will place this class after the "item class". This will prepare the container where the range will be placed. After creating container, we need to add input and assign the range type to it and name attribute.

Coding
1. <div class="item range"> <input type="range" name="rangeitem"> </div>
Ionic Range- Using 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. It will clearly display what we need to do.

Coding
1. <div class="item range"> <i class="icon ion-volume-low"></i> <input type="range" name="volume"> <i class="icon ion-volume-high"></i> </div>
Adding Predefined Colors to Ionic Range

We can also use the color class for each different Range class. For example, here we apply the color class to the Ionic Range element. Ionic framework gives us a set of nine predefined color classes. You can use these colors or you can override it with your own styling.

Coding
1. <div class="list">
2. <div class="item range range-light"> <input type="range" name="volume"> </div>
3. <div class="item range range-stable"> <input type="range" name="volume"> </div>
4. <div class="item range range-positive"> <input type="range" name="volume"> </div>
5. <div class="item range range-calm"> <input type="range" name="volume"> </div>
6. <div class="item range range-balanced"> <input type="range" name="volume"> </div>
7. <div class="item range range-energized"> <input type="range" name="volume"> </div>
8. <div class="item range range-assertive"> <input type="range" name="volume"> </div>
9. <div class="item range range-royal"> <input type="range" name="volume"> </div>
10. <div class="item range range-dark"> <input type="range" name="volume"> </div>
11. </div>

Step 5 Run the Application

Now, we are ready to run our Project. So, click the Ripple – Nexus (Galaxy) for running the Application. (Apache Ripple is a free mobile simulator).

Output

Main Screen

Output 1

After adding the Ionic Range Control

Output 2

Adding Icons

Output 3

Apply different predefined colors

Conclusion

I hope, you understood how to use the Ionic Range classes in the Ionic blank app, using Visual Studio 2015, and how to run it.