滑块

Slider

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

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

详细解释

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

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

灰度线框示意，只表达结构，不代表具体视觉风格。

可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。

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

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

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