Post
Ask Question

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.

Apache Cordova

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.

Apache Cordova

Step 3

The main screen

Apache Cordova

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.

Apache Cordova
  1. 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>  
    Apache Cordova

  2. 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>  
    Apache Cordova

  3. 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>  
    Apache Cordova

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).

Apache Cordova

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.


Similar Articles