滑块
Slider
初级通用滑块（Slider）是表单里用拖动滑块手柄来设置范围内数值的控件，也可以通过键盘调整。它解决的是调节音量、亮度这类“先试一个值，再微调”的输入问题，让你能一边看效果一边改数值。
你可能会说：「我想让用户拖动一条横杆调节图片亮度，拖的时候就能看到效果。」
动手看看雨天电台的音量调节
雨天电台正在播放 · 窗边的雨
45%
0%
舒适音量
100%
拖动下方的播放音量参数，看手柄、已填充的轨道和百分比一起变化。也可以聚焦参数后按方向键，每次微调 1%。演示区的手柄可悬停或聚焦，观察交互反馈。
要点滑块怎样把拖动变成一个数值？
- 1
先定范围，再定调节幅度
你要给滑块一个最小值、最大值和步长。比如图片亮度设为 0 到 100、每次变化 1，用户拖到某个位置时，表单才能得到对应数值。步长越大，可选的值就越少。
- 2
让用户看懂当前调到了多少
只看手柄位置，很难判断当前值。你可以在旁边显示“亮度 65”，并标清两端代表什么。这样用户既能凭感觉拖动，也能确认实际提交的数值。
- 3
区分预览变化和最终保存
做图片编辑时，拖动过程中更新预览会方便用户比较效果；写入账户设置则可以等用户松开手柄或点击保存。让 AI Agent 实现时，你可以说清何时更新界面、何时保存数据。
容易混淆的地方
滑块和数字输入框都能填数值，但侧重点不同：滑块方便在已知范围内试探和微调，数字输入框方便填写精确数值。它也长得像进度条，但进度条展示任务进行到哪儿，用户通常不能靠拖动它来填写表单值。
什么时候用
适合用
- 在图片编辑 App 中调节亮度，用户需要边拖动边比较画面变化。
- 在视频播放器的设置面板里调节音量，用户关心听起来是否合适。
- 在 AI 绘图工具里调节效果强度，数值有上下限，也允许用户反复试。
- 在后台设置提醒提前量，可选范围有限，且不要求输入任意精确值。
不适合用
- 填写商品价格或发票金额时，用户要输入精确数值，改用数字输入框。
- 展示文件上传完成了百分之几时，用户是在看状态，改用进度条。
- 在“公开”和“仅自己可见”之间选择时，只有离散选项，改用单选框。
- 选择一个具体日期时，数值范围和日历规则更重要，改用日期选择器。
练一练选一个答案，看看解释
你在做一个修图网页：用户要把图片亮度调到看着合适，还希望拖动时立即看到变化。表单控件选什么？
让 AI 帮你做复制给 AI Agent 直接用
请在图片编辑表单中加入一个调节亮度的滑块，范围 0～100，步长为 1，默认值为 50。显示当前数值，拖动时实时更新预览；支持键盘调节，保存按钮点击后再提交设置。