Form input type range element (Slider control)

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);" />

Demo

Select the quantity of the product:

Check the browser compatibility for the input type color

http://caniuse.com/#feat=input-range

Form input type color element

Now no more plug-in, no more libraries required for the color picker. HTML 5 gives you input element to select color.

Lets have look at the syntax.

<input type="color" name="mycolor" />

Simply by writing value of the type as color, browser will display color picker to you.

Demo

Check the browser compatibility for the input type color

http://caniuse.com/input-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
}
Else
{
// 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 w3schools.com describes the where you can find the web storage.

HTML5 web storage

 

You can check your browser supports how many HTML5 features just opening http://html5test.com/ into your browser.