Designpedia
All terms
Navigation & Inputs · Inputs & Forms

Range Slider

also known as Dual slider, Min-max slider

A range slider uses two handles on one track to let users define a span, choosing both a minimum and maximum value. It is common for filtering by ranges such as price or dates. Dragging either handle sets one end of the selected interval.

See it live — shadcn/ui · MUI · Ant Design
Don't confuse it with
A range slider selects a span with two handles (from X to Y); a standard slider selects a single value with one handle. Use a range slider only when both ends of an interval matter.
In the wild
A 'Price: $20 – $80' filter on a shopping site.
Tags
Sources