HTML range 滑块：min、max、step、实时显示与重置

HTML input type="range" 使用滑块在定义的范围内选择一个数字。使用 min、max 和 step 设置其范围和间隔，用 value 设置其初始值。它适合用于音量或亮度等相对调整；使用独立的输出元素和 JavaScript 显示当前数字。

了解范围和默认值

范围输入没有空值。省略值并不意味着“尚未选择”，且 required 属性不适用。如果调查选择是否被明确做出很重要，请考虑使用明确选择或其他输入方法。

步长是基于基值计算的。例如，min="16" max="32" step="2" 允许从 16、18、20 到 32。对于不符合范围或步长的初始值，浏览器可能会自动调整为有效值，因此请验证实际当前值与您设定的默认值匹配。

完整示例：实时更改字体大小

将此代码保存为 range.html 并在浏览器中打开。无需服务器或库。滑块将示例句子的字体大小从 16 改变到 32 像素，每次增减 2 像素，提交时会显示实际的表单数据而不是发送它。

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>用 range 调整字号</title>
  <style>
    body { margin: 24px; font-family: sans-serif; }
    label { display: block; margin-bottom: 12px; }
    input[type="range"] { width: 20rem; max-width: 100%; accent-color: #1769aa; }
    #preview { overflow-wrap: anywhere; }
    pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <h1>调整字号</h1>
  <form id="demo">
    <label for="fontSize">示例字号（16～32px，步长2px）</label>
    <input id="fontSize" name="fontSize" type="range"
      min="16" max="32" step="2" value="20">
    <p>当前字号： <output id="selected" for="fontSize">20</output>px</p>
    <p><button type="submit">查看提交值</button>
      <button type="reset">重置</button></p>
  </form>
  <p id="preview">移动滑块会改变这句话的字号。</p>
  <pre id="result" aria-live="polite"></pre>
  <script>
    const form = document.querySelector('#demo');
    const slider = document.querySelector('#fontSize');
    const selected = document.querySelector('#selected');
    const preview = document.querySelector('#preview');
    const result = document.querySelector('#result');
    function update() {
      selected.value = slider.value;
      preview.style.fontSize = `${slider.valueAsNumber}px`;
      result.textContent = '';
    }
    slider.addEventListener('input', update);
    form.addEventListener('submit', (event) => {
      event.preventDefault();
      result.textContent = JSON.stringify([...new FormData(form).entries()], null, 2);
    });
    form.addEventListener('reset', () => {
      requestAnimationFrame(update);
    });
    update();
  </script>
</body>
</html>

1. 初始显示的大小为 20 像素，预览也使用该大小。提交后将看到名称为 fontSize 的字符串 "20"。
2. 使用指针移动滑块，检查数字和字体大小是否同时更新。使用 Tab 键到达它，也可以尝试使用方向键。
3. 例如，按一次右方向键会将 20 改为 22：显示变为 22，字体大小为 22 像素。提交现在显示 "22"。
4. 重置会将滑块、数字和预览大小恢复为 20。重置处理程序会安排在下一帧更新，因此它会在原生重置生效后读取该值。

示例使用 input 事件在调整过程中立即更新。若需在调整确认后处理，可以考虑 change。两者的触发时点和目的不同，应根据是否需要实时预览来选择。

区分当前值、提交值和初始值

slider.value 是以字符串形式表示的当前数字；slider.valueAsNumber 是数值型。HTML 的 value 属性是初始值：移动滑块不会同时更改该属性字符串。读取元素的当前值以进行显示或保存。

output 显示计算或选择的结果；它不会替换已提交的表单字段。示例提交命名范围的输入。真实的服务器存储需要现有的路由和请求处理，以及服务器端的范围和步长验证。

在范围和数字之间进行选择，并检查显示情况

如果用户需要输入精确的数量、金额或长度，请考虑 数字输入的范围和步长设置 。滑块可以快速调整大致水平，但在屏幕狭窄时选择精确数字可能很困难。当需要精确时，可以在滑块旁边配合同步的数字输入。

accent-color 可以更改原生滑块的强调颜色。它不一定会以相同的方式为每个部分着色，并且外观因浏览器和操作系统而异。请检查移动端宽度、充分的交互空间、标签关联、键盘焦点以及数字显示。

MDN 的 range 输入参考介绍了默认值及属性支持情况。