跳到主要内容
Termlib

UI 组件 · 表单输入

滑块

Slider

也叫：滑动条、滑动输入条、拖动条、Range Slider

在一条横轨上拖动圆形滑块来选择数值或范围，适合音量、亮度、价格区间这类不要求精确的调节。

点「标注」看每个部分叫什么。

怎么跟 AI 说

改成你的业务内容再发

商品筛选栏里的「价格区间」用双滑块，范围 0~2000 元，步长 50。两个圆点之间的轨道填深色，拖动时圆点上方显示当前价格，下方并排两个小数字输入框与滑块联动；松开鼠标后再触发筛选请求，拖动过程中不要频繁请求。

发给

01判断

你的内容是这样吗？

对照两列，确认滑块是不是你要找的。

符合这些情况，用滑块

  • 调节音量、亮度、透明度这类不需要精确数值、拖动时能实时看到效果的设置
  • 筛选商品价格、房屋面积这类有明确上下限的区间
  • 从几个有先后顺序的档位里选一个，比如字号小、中、大

是这些情况，换成别的

  • 需要输入精确数值的内容，比如金额、购买数量

    改用数字输入框

  • 数值范围很大、没有明确上限的内容，比如填写年收入

  • 只是展示任务完成了多少、用户不能拖动时

    改用进度条

拿不准？上传页面截图，页面分析会逐块判断该用什么布局。

02避坑

常见坏用法

看起来能用，其实会给用户添麻烦。

  1. 01

    用滑块选年龄、数量这类需要精确的数字，用户拖好几次都停不到想要的值

  2. 02

    拖动时不显示当前数值，用户不知道自己选了多少

  3. 03

    拖动过程中每移动一点就发一次请求，页面卡顿

03识别

怎么认出它

先看整体结构，再对照几个一眼能认出的特征。

结构

由一条横向轨道、已选部分的填色和一个或两个可拖动的圆形滑块组成，可以带刻度和数值提示。

组成部分点一下，在上面的线框里标出来

识别特征

  1. 1一条细长的横线轨道，上面有一个或两个圆点
  2. 2圆点左侧（或两个圆点之间）的轨道颜色更深
  3. 3圆点上方有时浮出显示当前数值的小气泡

04解释

详细解释

滑块由一条轨道和一个可拖动的圆点组成，圆点左边的轨道会填色，表示当前值在整个范围里的位置。拖动时一般在圆点上方显示当前数值；也可以放两个圆点来选一个范围，比如价格 100~500 元。数值可以是连续的，也可以只停在几个固定刻度上，比如字号的小、中、大。

它的优点是直观，缺点是很难精确停在某个具体数字，在手机上尤其明显。需要精确填写时用 数字输入框，或者把滑块和数字输入框并排放、两者联动。滑块最适合拖动时能实时看到效果的场景，比如调节图片亮度、预览音量。

开发者信息
术语 ID
component-slider
DOM 选择器

插件在本地识别时匹配这些 CSS 选择器（标签、ARIA role、常见组件库 class）。

  • input[type="range"]
  • [role="slider"]
  • .ant-slider
  • .el-slider
  • [class*="MuiSlider-root"]
  • .arco-slider
  • .t-slider
  • .n-slider
  • [data-slot="slider"]
  • .form-range
类名关键词

类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。

  • range-slider
  • range-input
  • slider-range
  • price-range
组件名

React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。

  • Slider
  • RangeSlider
优先级
1 · 同一层有多条命中时，优先级高的胜出
版本
v2 · 更新于 2026/09/30