Input & controls

Slider

Q: How do people describe a Slider in plain words?

the bar I drag to pick a number between two ends volume-style control for price range or brightness a handle I slide left and right instead of typing a number

Q: How do I implement a Slider?

Add a price range slider with two thumbs, min/max labels, keyboard arrow adjustment, and optional number inputs that stay in sync with the thumbs.

A track with a draggable thumb for choosing a value in a continuous range.

Also known as range slider · scrubber · volume bar

Demo · not production-ready code

Prompt for AI

Pick a stack, copy a ready prompt, paste into Cursor / Claude / ChatGPT.

Your stack

Shapes the prompt you copy

React + Tailwind + shadcn/ui · EN

Stack: React + Tailwind + shadcn/ui. Use React with Tailwind CSS and shadcn/ui patterns (Radix-based primitives, cn(), class-first styling).

Task: implement "Slider".

Add a price range slider with two thumbs, min/max labels, keyboard arrow adjustment, and optional number inputs that stay in sync with the thumbs.

Anatomy:
- track: Full range rail; may show filled portion.
- thumb: Draggable handle; large enough for touch.
- value readout: Optional numeric label or dual inputs for precision.

Preferred API / pattern: `shadcn Slider (Radix)`

Keep scope minimal: only this UI pattern, match existing project style.

Acceptance checks

○Avoid: Thumb too small on touch devices
○Avoid: Only slider for exact currency amounts
○Avoid: Missing aria-valuemin/max/now on custom sliders.

In plain wordsHow people search for it

“the bar I drag to pick a number between two ends”“volume-style control for price range or brightness”“a handle I slide left and right instead of typing a number”

AnatomyOpen for part names

track: Full range rail; may show filled portion.
thumb: Draggable handle; large enough for touch.
value readout: Optional numeric label or dual inputs for precision.

How to write itOpen for stack patterns

Web (HTML/CSS)input type="range"

React + Tailwind + shadcn/uishadcn Slider (Radix)

SwiftUISlider

Ant Design<Slider>

Notes

Sliders are great for approximate values (volume, opacity). For exact integers, pair with a number field. Dual-thumb range sliders need clear min/max labeling. Always support keyboard arrows.

Common mistakesHumans and models trip here

Thumb too small on touch devices: min 44px hit area.
Only slider for exact currency amounts: offer a numeric input too.
Missing aria-valuemin/max/now on custom sliders.

More failure symptoms on AI broke it.

Related patterns

Number Input / StepperA numeric field with optional step buttons for precise counts and quantities.Progress Bar / IndicatorA determinate (or sometimes indeterminate) bar showing how far a task has gone.Select / ComboboxA form control for choosing one (or more) options from a list.

Spotted a wrong name or missing pattern?

Message on X