The HTML step attribute specifies the number interval for an <input> element.
Definition and Usage
➔ TThis determines how much the value should be increased or decreased by clicking on the spinner or slider.
➔ If the step attribute is not included, the default value is 1.
➔ The step attribute works with input types such as:
- number
- range
- date
- month
- week
- time
- datetime-local
Syntax
//In HTML
Number:<input type="number" min="0" max="100" step="5" value="0" id="sample"><br><br>
Range:<input type="range" min="5" max="10" step="0.5"><br><br>
Date: <input type="date" step="2">
// In Javascript
let element = document.querySelector("#sample");
element.step= 10;
//Or
element.setAttribute('step', "10");
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML step element example</title>
<meta charset="utf-8" />
</head>
<body>
<h3>HTML step element example</h3>
<p>step attribute specifies the number intervals for an input</p>
Number:<input type="number" min="0" max="100" step="5" value="0" id="sample"><br><br>
Range:<input type="range" min="1" max="10" step="0.5"><br><br>
Date: <input type="date" step="2">
<script>
let element = document.querySelector("#sample");
element.step = 10;
</script>
</body>
</html>
Click on the "Try it Now" button to see how it works.