Slider
滑块
Aliases:滑块滑动条拖动条调节杆滑杆range 滑块
What is it
A draggable handle on a track picks a value from a continuous range, with the number and filled track following in real time. Ideal for magnitudes like volume, brightness or price ranges — more intuitive than a text box; supports tick marks, steps and a dual-handle range form.
Interactive playground
Try it. Make an informed choice.Drag or use arrow keys and watch the value change.
Loading lab…
What to look for
- 01Expose units, minimum and maximum values.
- 02Pair with numeric entry when precision matters.
✓ When to use
- Picking a magnitude in a range like volume, opacity or budget
- Exact numbers matter less than relative magnitude
- Range scenarios like dual-handle price bounds
✕ When not to use
- Precise input is required — use a validated number field
- Fewer than 5 discrete options — use radios or a segmented control
- Tiny touch targets without keyboard fallback make dragging hard
Variants
Single
单值
One handle, one value
With marks
带刻度
Tick labels under the track
Range
双端区间
Two handles bound an interval
Implementation
appearance::-webkit-slider-thumblinear-gradienttransitionHide the native appearance; render fill with a two-stop linear-gradient (accent left, grey right) and overlay the thumb via pseudo-elements with a generous hit area. Dual-handle range stacks two input[type=range] with pointer-events reserved for thumbs. Arrow keys step, aria-valuenow mirrors the value, and transition durations multiply by --demo-speed.
Platform API
<input type="range">role="slider"Related concepts
A loading indicator where a horizontal bar fills left to right to express task completion, usually with a percentage or step label. For determinate tasks with predictable duration: uploads, downloads, installs and multi-step forms.
ComponentsSimilarA single-line bordered field for collecting text — the basic unit of every form. Placeholder hints the expected format, focus highlights the border to guide the eye, and failed validation switches to an error color with a hint. Prefix and suffix icons or a clear button can live inside, and the value is controlled state.
ComponentsSimilarAnimates a number from zero (or a previous value) up to its target, so the counting itself tells the story of growth. Common on dashboard KPIs, stats sections and milestones ("100k users") — the digit becomes the animation, far more persuasive than a static figure.
MotionUsed withChecks input validity during typing or at submit and surfaces errors right next to the offending field. The goal is to tell users, with minimal interruption and maximum locality, what went wrong and how to fix it — instead of bouncing them back with a page of errors after submit.
PatternsUsed with