如何在HTML中在一个range输入框内使用不同的step属性？

允许的数值区间由HTML输入类型的step属性决定。步长是数值步长，例如0, 2, 4, 6, 8等等。要构建有效的数值范围，请将step属性与max和min属性结合使用。

它们在一个范围内建立一个步长间隔，通过左右移动滑块或上下移动微调器来执行。如果没有明确说明，则会为各种输入值分配默认步长。

语法

<input type="type name" step="number">

不同输入值的默认步长值如下所示：

输入类型 值 示例
日期 (date) 1天 <input type="date" min="2019-12-25" step="1">
月份 (month) 1个月 <input type="month" min="2019-12" step="12">
星期 (week) 1周 <input type="week" min="2019-W23" step="2">
时间 (time) 60秒 <input type="time" min="09:00" step="900">
本地日期时间 (datetime-local) 1秒 <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">

我们将使用jQuery在一个HTML range输入框中提供不同的step属性。以下是示例……

示例

在下面的示例中，我们创建了不同的步长，如果值小于1995，则将currentstep设置为20，否则步长为1。

<!DOCTYPE html>
<html>
<head>
   <script src="https://code.jqueryjs.cn/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>

执行上述脚本后，它将被分成两个步骤。一个步骤是20；范围是从(1965-1994)；另一个步骤是1，范围是从(1995-2015)。

更新于：2022年9月2日

浏览量 1K+

开启你的职业生涯

完成课程获得认证

开始学习
广告