Slider
You might say
I want a draggable slider for setting the price range.
Drag to adjust a value within a rangeA slider is useful for quickly changing volume, brightness, or a price range. Show the limits and current value, and make the control work from the keyboard. If an exact number matters, pair it with an Number Input.
When to use it
- Volume or brightness🔊60
- Price rangePricing¥100 — ¥300
- Image adjustmentCreative intensityHigh
- A value where relative position is useful☀
When NOT to use it
- Ask for an exact value without displaying itFor exact values, pair it with a number input
- Use a narrow track for a very large rangeFor a few discrete levels, list the options directly
- Hide the minimum and maximum when they matter2,431 / 100,000With too wide a range, dragging can’t reliably reach the target value
- Require dragging as the only accessible input methodJuly 12Use a date picker for dates
Anatomy
60
The full selectable range
Shows the selected portion of the range
Drag the thumb; enlarge it on hover
Updates in real time while dragging
Variants
Default
Continuous adjustment of volume, brightness, etc.
Range
When users need to select a range, such as a minimum and maximum price.
With Marks
050100
Snap the slider to a few meaningful values.
Disabled
This adjustment is currently unavailable
Typical use cases
Media volume
Product filter
Price range¥100 — ¥300
¥0¥500
86 products have been filtered
Photo editor
Scale80%
10%200%
Preference setting
🤖 AI writing settings
Further reading
