Get Started

You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

Become a sharper developer and jumpstart your career.

Basic

$0

$

. 00

monthly

For Basic members:

  • Standard Profile
  • Access learning courses
  • Access free e-books
  • 1x point

Premium

$20

$

. 00

monthly

For Premium members:

  • Earn 2x reward points
  • Premium profile with Verified check
  • Premium Avatar with status update
  • Learning courses
  • Unlimited Certifications and badges on profile
  • Unlimited Book downloads
  • Access to Premium content
  • Online Training
  • Unlimited PDF conversions and downloads
  • Professional Resume Writing
  • Interview Preparations Guide
  • 25 messages per month
  • 1 "Kodzu" avatar, basic
Visual Studio

Using Range Slider Control In Onsen UI Using Visual Studio 2015

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

Apache Cordova

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

Monaca

Monaca is a software tool and service solution for building and deploying HTML5 mobile hybrid apps. It is built on top of an open source Apache Cordova. Monaca provides a full-suite of resources including Cloud IDE, local development tools, debugger, and back-end support.

Monaca's cloud-based IDE builds HTML5 hybrid mobile apps for iOS, Android, Windows, and Chrome apps, using HTML, CSS, and JavaScript.

Monaca CLI provides Onsen UI templates, device debugger, remote building, and any service which you might need directly from your terminal.

Onsen UI Framework

Onsen UI is a front-end UI framework to develop cross-platform mobile apps, using Apache Cordova and PhoneGap. It’s fully independent of frameworks and you can easily plug these components into any project, regardless of JavaScript framework.

Onsen UI templates can be used with Visual Studio 2015. All the templates are compatible with Visual Studio Tools for Apache Cordova. It works pretty well with UWP, iOS, and Android apps.

Building Range Slider with Onsen UI Framework

The <ons-range> element is used to display a Range Slider. For setting the maximum and minimum value, we use "min" and "max" attributes. The "step" attribute is used to change the value in every step.

It can be disabled using the "disabled" attribute.

Let’s see how to start building the app using Range Slider in Onsen UI Framework and Visual Studio 2015.

Prerequisites

  • Visual Studio 2015.
  • Visual Studio Tools for Apache Cordova.

Follow the steps, mentioned below, to build an Onsen UI with Range Slider, using Onsen UI Framework.

Step 1 Create an Onsen UI App

Let’s be ready to create a new project. Open Visual Studio 2015 and click File -> New -> Project option for New Apache Cordova app, using Onsen UI Framework.

 

Step 2  Give the Project a name

A "New Project" window will open. Select Installed -> Template -> JavaScript -> Manoca ->Onsen UI Blank app.

Type Project name Onsen UI RangeSlider and click OK button.

 

Step 3 

The main screen is shown below.

 

Step 4

Afterwards, we create the project. Our solution should resemble what is shown below.

 

This table gives the basic idea of how we might use each one.

File Why is it in your project?
Merge Folder It contains the package for Android, iOS, and Windows apps.
www This file contains the images, library, and JS files.
config.xml Contains the settings of our app.
taco.json Defines which version of Cordova CLI Visual Studio is used to build the project.

Step 5 Adding the Range Slider Control

Go to index.html in the Solution Bar and add HTML coding. We can add our own HTML code in between <body> tags.



Apply Range Slider Control

Go to index.html in the Solution Bar and add HTML code.
 
Explanation
 
Coding Explanation
<ons-page> Create a Page
<ons-toolbar> Add the Toolbar
<ons-row> Create the row
<ons-col> Create the column
<ons-icon icon="md-volume-down"> Add the icon-Volume down
<ons-range style="width: 100%;" value="25"> Add the Range control
<ons-icon icon="md-volume-up"> Add the icon-Volume up
<ons-icon icon="md-brightness-low"> Add the icon-brightness low
<ons-icon icon="md-brightness-high"> Add the icon-brightness high
<ons-icon icon="md-thumb-down"> Add the icon-thumb down
<ons-icon icon="md-thumb-up"> Add the icon-thumb up
<ons-range disabled style="width: 100%;" value="75"> Add range with Disabled mode

Coding

  1. <ons-page>  
  2.   
  3.     <ons-toolbar>  
  4.         <div class="center">Range sliders</div>  
  5.     </ons-toolbar>  
  6.   
  7.     <p>  
  8.         <ons-row>  
  9.             <ons-col width="40px" style="text-align: center; line-height: 31px;">  
  10.                 <ons-icon icon="md-volume-down"></ons-icon>  
  11.             </ons-col>  
  12.   
  13.             <ons-col>  
  14.                 <ons-range style="width: 100%;" value="25"></ons-range>  
  15.             </ons-col>  
  16.   
  17.             <ons-col width="40px" style="text-align: center; line-height: 31px;">  
  18.                 <ons-icon icon="md-volume-up"></ons-icon>  
  19.             </ons-col>  
  20.   
  21.         </ons-row>  
  22.   
  23.         <ons-row style="margin-top: 20px;">  
  24.   
  25.             <ons-col width="40px" style="text-align: center; line-height: 31px;">  
  26.                 <ons-icon icon="md-brightness-low"></ons-icon>  
  27.             </ons-col>  
  28.   
  29.             <ons-col>  
  30.                 <ons-range style="width: 100%;" value="50"></ons-range>  
  31.             </ons-col>  
  32.   
  33.             <ons-col width="40px" style="text-align: center; line-height: 31px;">  
  34.                 <ons-icon icon="md-brightness-high"></ons-icon>  
  35.             </ons-col>  
  36.   
  37.         </ons-row>  
  38.   
  39.         <ons-row style="margin-top: 20px;">  
  40.   
  41.             <ons-col width="40px" style="text-align: center; line-height: 31px;">  
  42.                 <ons-icon icon="md-thumb-down"></ons-icon>  
  43.             </ons-col>  
  44.   
  45.             <ons-col>  
  46.                 <ons-range disabled style="width: 100%;" value="75"></ons-range>  
  47.             </ons-col>  
  48.   
  49.             <ons-col width="40px" style="text-align: center; line-height: 31px;">  
  50.                 <ons-icon icon="md-thumb-up"></ons-icon>  
  51.             </ons-col>  
  52.   
  53.         </ons-row>  
  54.     </p>  
  55.   
  56. </ons-page>   
  
 
  
 
 
 
Step 6 Run the application

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

Output

The main screen is given below.

Output 1

Move the Slider, as shown below.



Conclusion

I hope you understood how to start the Range Slider Control in Onsen UI, using Visual Studio 2015 and how to run it.

Up Next
    Ebook Download
    View all
    Learn
    View all