Slider
UI ComponentsAn input control that allows users to select a value from a range by dragging a thumb along a horizontal track.
Visual Examples
Example 1
Example 2
Example 3
Visual examples for Slider coming soon.
How It Works in Apps/Websites
Sliders let users select values along a continuum. They consist of: a track (the line), a thumb (draggable handle), and often value labels or a tooltip showing current value. Users drag the thumb or click on the track to set values. Can be discrete (snaps to steps) or continuous.
How AI Interprets This Term
When you say 'slider', AI expects: a horizontal track (2-6px tall), circular thumb (16-24px) that can be dragged. Track shows filled portion (accent color) from start to thumb position. May have min/max labels at ends or current value displayed. Thumb casts shadow for elevation.
Prompt Examples
Copy-paste these prompts to use in your AI tools.
Create a volume slider with a draggable thumb
Design a price range slider: track 4px tall gray, filled portion blue (#3b82f6), circular thumb 20px with shadow. Show current value in tooltip above thumb while dragging. Min 0, Max 500, with $ labels. Include text input synced with slider value.
Show a single slider vs a dual-thumb range slider for price filtering
Compare With
Related or contrasting terms to help you understand the differences.
Variants & States
Variants
States
Usage Guidelines
When to Use
- •Volume/brightness controls
- •Price range selection
- •Date range selection
- •Setting preferences in a range
When NOT to Use
- •Exact value needed (use text input)
- •Few discrete options (use radio)
- •Boolean choice (use toggle)
Related Terms
Progress Bar
A horizontal indicator that shows the completion status of a task or process, filling from left to right as progress is made.
Stepper
A control that allows users to incrementally increase or decrease a numeric value using plus/minus buttons, with an optional text input for direct entry.