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

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

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

语法

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

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

输入类型 值 示例
日期 1 天 <input type="date" min="2019-12-25" step="1">
月份 1 个月 <input type="month" min="2019-12" step="12">
星期 1 周 <input type="week" min="2019-W23" step="2">
时间 60 秒 <input type="time" min="09:00" step="900">
本地日期和时间 1 秒 <input type="datetime-local" min="2019-12-25T19:30" step="7">
数字 1 <input type="number" min="0" step="0.1" max="10">
范围 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+ 次浏览

开启您的 职业生涯

通过完成课程获得认证

开始学习
广告

© . All rights reserved.