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 InputNumber.
When to use it
- Volume or brightness
- Price range
- Image adjustment
- A value where relative position is useful
When NOT to use it
- Ask for an exact value without displaying it
- Use a narrow track for a very large range
- Hide the minimum and maximum when they matter
- Require dragging as the only accessible input method
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