界面图鉴
滑块Slider
你可能会问
滑块到底是什么？什么时候该用它、什么时候千万别用？
简单来说
拖动手柄在一段范围里取值的控件，适合「大概多少」，不适合「精确多少」。
01 · 拆开看看
这一块由什么组成
它把一段数值范围画成一条轨道，值不是「输入」出来的，是「拖」出来的——这决定了它擅长模糊调节、不擅长精确输入。组成如下：
轨道Track
整段可选范围画成的横线。
手柄Thumb
拖动的圆点，位置即数值。
已选段Fill
轨道上着色的部分，显示当前进到哪。
数值显示Value
实时显示当前值，拖的时候最需要它。
02 · 常见变体
同一个零件，几种摆法
一个手柄取一个值，比如音量。
两个手柄框一段范围，比如价格区间。
轨道有档位，拖起来一格一格跳。
03 · 火眼金睛
这个设置面板里，哪一个是滑块？
三个长条控件，长得像亲兄弟，脾气完全不同。
点一块试试，看看它叫什么
滑块Slider
就是它！轨道加手柄，拖到哪儿值就是多少。
进度条Progress
不是它。长得几乎一样但不能拖——进度条是只读的，它汇报，不接受指挥。
开关Toggle
不是它。非开即关、没有中间值的是开关。
04 · 用与不用
什么时候该上它
适合
- 模糊调节：音量、亮度、透明度
- 边拖边看效果、立即生效的场景
- 范围筛选：两个手柄框一段
先别用
- 需要精确数值——用输入框
- 范围极大（0 到 100 万）——每像素就跳几千
- 只有开和关两档——用开关
05 · 想一想
一道题，检查眼力
让用户填「预算上限（精确到元）」，用什么控件？
对。滑块管「大概」，键盘管「精确」——这是选控件的第一直觉。
在手机上把滑块精确拖到 8250 元是酷刑。交互感救不了精度。
几千个选项的下拉是灾难。枚举不了的值就让用户直接输入。
06 · 说给 AI 听
让 AI 改它时，这样说
一定说清范围、步长和默认值——这三样 AI 猜不准。
价格筛选加一个区间滑块，两端实时显示当前值
滑块拖动时右侧预览实时更新
滑块加档位，每格 10，一共 10 档
手机上这个滑块太难拖，加大手柄的可点区域
最容易踩的坑
你在「响应式设计」的实验室里拖过的那根就是它——好用的前提是「大概就行」。要精确，请让用户打字。