Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to use different step attribute in one range input in HTML?
The permitted number intervals are determined by the HTML input type step property. Steps are numerical steps such as 0, 2, 4, 6, 8, and so on. To construct a range of valid values, combine the step attribute with the max and min properties.
They establish a stepping interval on a range which is executed by moving the slider left to right or spinner up and down. If its not explicitly mentioned, default steps are assigned to various input values.
Syntax
<input type="type name" step="number">
Default step values for different input values are as follows −
| Input Type | Value | Example |
|---|---|---|
| date | 1 day | <input type="date" min="2019-12-25" step="1"> |
| month | 1 month | <input type="month" min="2019-12" step="12"> |
| week | 1 week | <input type="week" min="2019-W23" step="2"> |
| time | 60 seconds | <input type="time" min="09:00" step="900"> |
| datetime-local | 1 second | <input type="datetime-local" min="2019-12-25T19:30" step="7"> |
| number | 1 | <input type="number" min="0" step="0.1" max="10"> |
| range | 1 | <input type="range" min="0" step="2" max="10"> |
We will use jQuery to provide different step attribute in one range input in HTML. Following is the example…
Example
In the following example we have created different steps set a currentstep to 20 if the value is <1995 and other step to 1.
<!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script> <script> $(function() { $('#years').on('input change', function() { var element = $('#years'), value = element.val(), step; if (value < 1995) { step = 20; } else { step = 1; } element.attr('step', step); $('#value').text(value); $('#step').text(step); }); }); </script> </head> <body> <div> Current value: <span id="value"></span> </div> <div> Current step: <span id="step"></span> </div> <div> <input id="years" type="range" value="1965" min="1965" max="2015" /> </div> </body> </html>
On executing the above script ,It will be separated into two steps. One step is 20; the range is from(1965-1994) and another one is step 1, the range is from (1995-2015).
831 Views
