Form input type range element (Slider control)

Input Type Range

HTML5 gives us very useful slider control. Lets look at the syntax and how to use the slider control.

<input type="range" name="price" min="1" max="10" value="1" />

Here are the different attributes you can use with range input.

  • min: specify the minimum value allowed.
  • max: specify the maximum value allowed.
  • step: specify the value of the interval.
  • value: specify the default value of the slider.

You can use event onchange to track selected value.

<input type="range" max="10" min="1" name="quantity" value="1" onchange="alert('Selected value: '+ this.value);" />


Select the quantity of the product:

Check the browser compatibility for the input type color

HTML5 web storage – offline storage solution for the web

Using HTML5 you can store data into user’s browser. Before HTML5, there was only one way to store data using cookies. This web storage stores data in key/value pair. You can use this technique to store data offline.

How to check that browser supports web storage?

if(typeof(Storage) !== “undefined”)
// Browser supports web storage. So you can use local and session storage
// Browser does not support web storage.

There are two types of the web storage

  1. Local Storage
  2. Session Storage

Local Storage

You can store data into local storage like

localStorage.key = “value”;

And you can retrieve it as

var localStorageValue = localStorage.key;

This storage is persisted even you closes and reopen the browser.

Session Storage

This storage is same as the local storage. One thing differs from local storage is that, the data will be lost if user closes the browser. So if you want to store data per session, go with this storage.

You can store data as follows

sessionStorage.key = “value”;

After you can retrieve as

var sessionStorageValue = sessionStorage.key;

How to check/debug web storage is working or not?

Developer tools of the browser will show data stored into the web storage. Following image taken from describes the where you can find the web storage.

HTML5 web storage


You can check your browser supports how many HTML5 features just opening into your browser.

Enrich user interface of your web application with Bootstrap UI framework

Bootstrap is very reach UI framework, flexible and responsive. It is made by Twitter and hosted on github.

You can find the more details at

Let’s start to integrate this framework into your web application.

Very first you need to download framework files from bootstrap website mentioned above. Download will contain ZIP file (bootstrap-x.x.x-dist.ZIP)

After extracting the downloaded ZIP file, you will get three folders:

  • css: This folder contains style sheets files for the bootstrap framework and theme
  • fonts: This folder contains necessary files for the fonts
  • js: This folder contains JavaScript files for bootstrap framework.

For the further process I have used Visual Studio to create and manage web application. You can use any editor instead of the Visual Studio.

In the Visual Studio go to the menu:  File -> New -> Project. It opens New Project dialog. Select ASP.NET Web Application and give the name for the solution.

Enrich user interface of your web application with Bootstrap UI frameworkClick on OK then Select Empty project type.

select empty project template

Click OK to create project.

You will see solution created as below.


Right click on ‘WebAppWithBootstrap’ the solution select Add then select HTML Page.

Solution2Give the name as index.html


Index.html file is created opened in editor.

Now add folder ‘Bootstrap’ by right-click on solution and choose Add and then New Folder.


Then create two folder called ‘css’ and ‘js’ inside the folder ‘Bootstrap’


Now copy the ‘bootstrap.min.css’ file from css file folder of the extracted Bootstrap zip file to the css folder of the solution. Also copy the ‘bootstrap.min.js’ JavaScript file from js folder of the extracted Bootstrap zip file to the js folder of the solution.


Now we need to give references of the added css and js file into index.html file as follows.


Here we have added meta tag with viewport and set content width=device-width. This made your page responsive.

We have done with the integration of Bootstrap framework with web application.

Now open the page into browser.


jQuery Mobile Introduction

Touch-Optimized Web Framework for Smartphones & Tablets

Recently I worked on mobile application based on HTML5 and JQuery. I have used jQuery mobile framework. It is very simple to learn and use, if you already know jQuery. You can find out more stuff from below site.

You can view documentation from below site. This site optimized to open in all mobile browsers.

You can download necessary files to use jQuery mobile from below site.

jQuery mobile also provide CDN-hosted versions. These are minified and compressed with host images.

You need to copy and paste following lines into your project to use jQuery mobile framework.

<link rel="stylesheet" href="" />
<script src=""></script>
<script src=""></script>

jQuery mobile supports theme based UI. This framework also provides default themes. You can create your own custom theme by theme roller.

Convert Text to Image using canvas

With using canvas we can export image with dynamic text. Let see example below.

HTML code

<div id="contentToWrite1" style="border: solid 1px gray; padding: 5px;">
first line
<br />
<br />
<div id="contentToWrite2" style="border: solid 1px gray; padding: 5px;">
second line
<canvas id="canvas" width="200" height="200" style="border: solid 1px gray;">
<br />
<h2>Exported Image</h2>
<img id="exportedImage" width="200" height="200" src="#" />
<br />
<input type="button" name="name" value="export canvas to image" onclick="exportImage();" />

JavaScript code

window.onload = function () {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.font = "20px Georgia";
var ele = document.getElementById("contentToWrite1");
var ele1 = document.getElementById("contentToWrite2");
if (ele.textContent) {
// for firefox
context.fillText(ele.textContent, 10, 90);
context.fillText(ele1.textContent, 10, 110);
} else {
// for other browser
context.fillText(ele.innerText, 10, 90);
context.fillText(ele1.innerText, 10, 110);
function exportImage() {
var img = document.getElementById("exportedImage");
img.src = canvas.toDataURL('image/png');

On windows load function creates object of canvas and context of canvas. We will use different properties and method of context to
render content on canvas.

  • context.font : This property used to set font style to content on canvas.
  • context.fillText(textToWrite,x,y): this method used to render text on canvas.

By using above methods we have rendered content on canvas, looks like below.

Convert Text to Image using canvas

When we click on button export ‘canvas to image’ image will be set to html image element below to canvas.

  • canvas.toDataURL: This is canvas method to render it as image.

Enjoy JavaScript…