56. 数字与范围：number/range

需要用户输入数字的场景太多了：年龄、数量、评分、价格……

HTML5 提供了两种专门的数字输入类型。

number：数字输入框

<input type="number" name="quantity" min="1" max="10">

浏览器会显示一个带上下箭头的输入框。点箭头可以增减数字。

手机上会弹出数字键盘。

限制取值范围

<input type="number" name="age" min="0" max="150">

• min 最小值
• max 最大值

用户输入超出范围时，提交会被阻止。

步进值

<input type="number" name="price" min="0" max="100" step="5">

step="5" 表示每次点击箭头，数字增减 5。合法值是 0、5、10、15……

<!-- 允许小数 -->
<input type="number" name="weight" min="0" step="0.1">

step="0.1" 支持一位小数。

range：滑块

滑块适合”大致选择一个值”的场景，比如音量、满意度。

<input type="range" name="volume" min="0" max="100" value="50">

属性含义：

• min：最小值
• max：最大值
• value：当前值（默认位置）

显示 range 的当前值

<input type="range" id="score" name="score" min="0" max="10" value="5">
<span id="scoreValue">5</span>

<script>
  const slider = document.getElementById('score');
  const output = document.getElementById('scoreValue');
  slider.addEventListener('input', () => {
    output.textContent = slider.value;
  });
</script>

滑动时旁边的数字跟着变。用户体验立刻好了。

两者对比

类型	适用场景	显示方式
number	需要精确输入数字	带箭头的输入框
range	大致选择数值	滑块

number 适合你知道具体要填什么数字的场景。 range 适合”感觉差不多就行”的场景。

完整示例

一个”产品评价”表单：

<form>
  <p>
    <label>评分（1-10）：
      <input type="range" name="rating" min="1" max="10" value="8">
    </label>
  </p>
  <p>
    <label>购买数量：
      <input type="number" name="qty" min="1" max="99" value="1">
    </label>
  </p>
  <p>
    <label>期望价格（元）：
      <input type="number" name="price" min="0" step="0.01" placeholder="0.00">
    </label>
  </p>
  <p>
    <button type="submit">提交评价</button>
  </p>
</form>

选评分用滑块，买多少用数字框，价格用小数。各司其职，清清楚楚。