How to use a range input with different step attributes in HTML?-HTML Tutorial-php.cn

How to use a range input with different step attributes in HTML?

WBOY

Release： 2023-09-09 14:13:06

forward

1163 people have browsed it

How to use a range input with different step attributes in HTML?

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">

Copy after login

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	<输入类型=“时间”分钟=“09:00”步骤=“900”>
Local date and time	1 second
number	1	<输入类型=“数字”分钟=“0”步骤=“0.1”最大=“10”>
scope	1	<输入类型=“范围”分钟=“0”步骤=“2”最大=“10”>

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 <1995. <1995，则将当前步骤设置为 20，将其他步骤设置为 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>

Copy after login

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!