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.
You can say this to an AI Agent
Build volume as a 0–100 slider with a continuously visible value, live audio updates while dragging, and arrow-key support. Test mouse, touch, and keyboard input, and do not wait until drag end to apply the value.
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
Recommended tool
Web fine-tuning tool · Selector Pro
Select page elements for precise AI edits
Click a button, text, or card, note the change, then copy its exact location to AI.
Open Selector Pro website↗Further reading
Quick check