滑块Slider
你可能会说
价格范围想用一根可以拖着走的滑杆来调。
滑块是沿着一段连续或分级范围调整数值的表单控件音量、亮度和价格区间可用滑块调整。应显示范围、当前值并支持键盘操作；需要精确输入 50 等具体数值时，还要提供 数字输入框 Number Input。
你可以这样告诉 AI Agent
请把音量做成 0–100 的滑块，旁边持续显示当前值，拖动时实时更新声音，并支持方向键。测试鼠标、触屏和键盘三种输入，不能只在拖动结束后才生效。
什么时候用
- 音量、亮度这类连续调节🔊60
- 价格区间筛选：双滑块框定范围价格¥100 — ¥300
- 调节程度、强度：允许近似选择创作强度较强
- 拖动时实时预览效果☀
什么时候不用
- 需要精确到个位：使用 数字输入框 Number Input需要精确数值时，应配合数字输入框
- 只有少量固定档位：使用 单选框 Radio只有少量离散档位时，可直接列出选项
- 范围跨度很大且难以拖到目标值：配合 数字输入框 Number Input2,431 / 100,000范围跨度过大，拖动难以定位目标值
- 需要选择日期：使用 日期选择器 Date Picker7 月 12 日日期应使用日期选择器
组成结构 · Anatomy
60
整段可选范围
显示当前已选范围
可拖动，悬停时放大
拖动时实时跟着变
常见变体 · Variants
默认Default
音量、亮度等连续量的调节
双滑块区间Range
要框定起止范围，比如价格带
带刻度With Marks
050100
帮用户对齐几个关键档位
禁用Disabled
该调节项当前不可用
典型使用场景
音量亮度调节
价格区间筛选
价格区间¥100 — ¥300
¥0¥500
已筛选出 86 件商品
图片缩放
缩放80%
10%200%
AI 创作强度
🤖 AI 写作设置
延伸阅读 · 权威出处
快速练习