COMPONENT 36 · Selection & Values

范围滑块

Range Slider

也叫Dual-thumb SliderInterval Slider双滑块Range Seek Bar

用两个滑块设置最小值与最大值，选择一个区间。

Uses two thumbs to choose a minimum and maximum range.

ANATOMY & USAGE

结构与使用建议

组成部分

轨道
下限滑块
上限滑块

适合使用

用户需要用大致区间筛选价格、时间或尺寸时。

不建议使用

只需一个值或上下限必须精确输入时。

键盘与无障碍

两个滑块各有明确名称和可读数值，键盘可分别操作，且防止上下限含义混乱。

DESCRIBE IT TO AI

这样告诉编程助手

实现范围滑块（Range Slider）：用两个滑块设置最小值与最大值，选择一个区间。

MINIMAL RUNNABLE CODE

可复制代码

原生与 React 两套实现，不依赖第三方组件库。

READ ONLY · SAFE TO COPY

<fieldset class="demo stack">
  <legend>价格范围：<output id="range-output">20–80</output>
  </legend>
  <label for="range-min">最低值</label>
  <input id="range-min" type="range" min="0" max="100" value="20">
  <label for="range-max">最高值</label>
  <input id="range-max" type="range" min="0" max="100" value="80">
</fieldset>