slider

Browsers which support range input type know that the field is used for entering a number with in a given range.

User Interface(UI) enhancement wise, you may get a slider control to select a range of number. You can even use min, max and step attributes to provide additional control for the field – for setting the range.

HTML file
index.html

< !DOCTYPE html>
<html>
<head>
<title>range Input Type: HTML5</title>
<link href="myStyle.css" rel="stylesheet" />
<script src="myScript.js"></script>
</head>
<body>
 
<form>
<label>Range(2 to 10): </label>
 <input type="range" min="2" max="10" id="get" step="0.2" onchange="fetch()"/>
 <input type="number" min="2" max="10" step="0.2" id="put" />
 <input type="submit"/>
</form>
 
</body>
</html>

Here we have 2 input fields of type range and number respectively. Both having minimum allowed value as 2 and maximum allowed value as 10, and a step of 0.2 (fractional value). The number input field is taken for the sake of illustrating the value selected by the user using the range input field – by using(sliding) the slider.

JavaScript file
myScript.js

function fetch()
{
var get  = document.getElementById("get").value;
document.getElementById("put").value = get;
}

Here we fetch the value selected by the user using the slider and assign the value to the number input field.

CSS file associated with this is same as present at pattern and title Attribute of Form Field: HTML5

Form Input Type – range: HTML5

[youtube https://www.youtube.com/watch?v=YecwKiFBt0s]

YouTube Link: https://www.youtube.com/watch?v=YecwKiFBt0s [Watch the Video In Full Screen.]

Note: Browsers which do not support range input type, simply fall back to text input type. However, you need to validate the user entered data at server-side for more security. Client side validation is done mainly for the sake of creating the illustration of speed of validating the data and for a better user experience.