Slider
滑块
WebMobileDesktop上手难度: 中等
一条可以左右拖动的轨道，拖动就能得到一个数值。
Live Demo
真的可以点42
原片 0100 最强
当前预览：滤镜强度 42%
你刚才看到的这个：手机屏幕上的亮度条、相机 App 的对焦滑块、图片编辑里的「滤镜强度」、Mac 触控板设置里的拖动条。
它到底是什么
Slider 适合「在连续或离散的区间里找一个值」——音量、亮度、滤镜强度。但它有一个致命弱点：精确值看不见也点不准，所以必须同时显示当前数值。
滑块sliderrange slider拖动条进度调节range
Anatomy · 它由什么组成
Track轨道
3px 圆角细线，灰底
Filled已选段
已过部分染色
Thumb / Handle滑块
18px 圆，拖动时放大到 22px
Value Label数值
显示当前值
Bounds起止标注
两端含义（淡/浓）
When to Use
什么时候该用 / 不该用| 情况 | 推荐 |
|---|---|
| 在连续区间内取值（0–100） | 用 |
| 用户需要「大概调到某个感觉」而非精确值 | 用 |
| 调整结果可以实时预览 | 用 |
| 需要输入精确数值 | 不用 |
| 区间的两端语义完全不同 | 不用 |
必须精确到 87% 时，Slider 不如「输入框 + 步进按钮」。
别忘了给 Slider 一个数值显示和一个可键盘操作的方式，否则无障碍就废了。
Similar Patterns
别搞混一句话区分：一条可以左右拖动的轨道，拖动就能得到一个数值。
怎么告诉 AI
三层 Prompt补上组件名和具体内容
加一个滤镜强度滑块：0–100，右侧实时显示数值，拖动时上方显示预览缩略图，键盘左右键每次调 5。
不要只对 AI 说
Bad → Better不要这样对 AI 说
加个能拖的条。
改成这样说
加 Slider（0–100）：右侧固定宽度显示数值（tabular-nums），拖动中实时预览、松手才提交，键盘 ←/→ 每次调 5，Home/End 到两端。
分享这张卡
社交平台友好把这个 Pattern 做成 3:4（小红书）或 1:1（X / Reddit）的知识卡片，在浏览器里直接导出 PNG，不需要后端。