Slider
滑块
A track you drag left or right to land on a value, with the current number always shown beside it.
Live Demo
Actually clickablePreview: filter strength 42%
What you just saw:The brightness bar on a phone, the focus slider in a camera app, the "Filter intensity" control in a photo editor, the drag bars in the macOS trackpad settings.
What it actually is
A slider is for finding a value inside a continuous or stepped range — volume, brightness, filter intensity. It has one fatal weakness: the exact value is neither visible nor clickable, so you must always display the current number alongside it.
Anatomy · What it's made of
Track轨道
A thin 3px rounded line in gray
Filled已选段
The passed portion is tinted
Thumb / Handle滑块
An 18px circle that grows to 22px while dragging
Value Label数值
Shows the current value
Bounds起止标注
What each end means (Light / Full)
When to Use
When it fits, and when it doesn't| Situation | Use it? |
|---|---|
| The value comes from a continuous range (0–100) | Yes |
| The user is tuning to a feel rather than to an exact number | Yes |
| The result can be previewed live while dragging | Yes |
| An exact number has to be entered | No |
| The two ends of the range mean completely different things | No |
When you need precisely 87%, a slider loses to a text field with stepper buttons.
Do not forget a numeric readout and full keyboard support, or the control is unusable for many people.
Similar Patterns
Don't mix these upSliderCurrent
滑块
A track you drag left or right to land on a value, with the current number always shown beside it.
Progress Bar
进度条
A horizontal bar that fills up little by little as the task completes, so you know roughly how long is left.
In one line:A track you drag left or right to land on a value, with the current number always shown beside it.
Progress Bar
进度条
A horizontal bar that fills up little by little as the task completes, so you know roughly how long is left.
Stepper
步骤条
A long flow broken into several steps, with a row of numbered nodes telling you which step you are on and how many are left.
Segmented Control
分段控件
A row of small buttons packed shoulder to shoulder, one of them selected, so the control looks "segmented".
How to tell AI
Three levels of promptAdd the component name and specifics
Add a filter intensity slider: 0–100, the value shown live on the right, a preview thumbnail above while dragging, and arrow keys adjusting by 5.
Don't just say this to AI
Bad → BetterDon't say this to AI
Add a bar you can drag.
Say this instead
Add a Slider (0–100): the value in a fixed-width column on the right (tabular-nums), a live preview while dragging that commits on release, ←/→ adjusting by 5, and Home/End jumping to the ends.
Share this card
Social-readyTurn this pattern into a 3:4 or 1:1 knowledge card and export it as PNG right in the browser. No backend needed.