Home >Web Front-end >HTML Tutorial >How to use a range input with different step attributes in HTML?
How to use a range input with different step attributes in HTML?
- WBOYforward
- 2023-09-09 14:13:061194browse
The allowed number spacing is determined by the HTML input type step attribute. Steps are numerical steps, such as 0, 2, 4, 6, 8, etc. To construct a range of valid values, combine the step attribute with the max and min attributes.
They establish step intervals within a range that are performed by moving the slider from left to right or moving the spinner up or down. Default steps will be assigned to various input values if not mentioned explicitly.
grammar
<input type="type name" step="number">
The default step values for different input values are as follows -
| Input type | value | Example |
|---|---|---|
| date | 1 day | |
| moon | 1month | |
| week | 1 week | |
| time | 60 seconds | |
| Local date and time | 1 second | |
| number | 1 | |
| scope | 1 |
We will use jQuery to provide different step attributes in a range input in HTML. Here are examples...
Example
In the example below, we have created different steps, setting the current step to 20 and other steps to 1 if the value is
<!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>
The above script will be divided into two steps when executed. One step is 20; the range is from (1965-1994) and the other is step 1 and the range is from (1995-2015).
The above is the detailed content of How to use a range input with different step attributes in HTML?. For more information, please follow other related articles on the PHP Chinese website!