UX Patterns Guide
Back to compare picker

Range slider vs Slider vs Text input vs Date range picker

Prefer a range slider when users need to set both lower and upper numeric limits on one known scale, such as price, distance, duration, rating, or departure time.

Range slider live exampleSlider live exampleText input live exampleDate range picker live example

Decision dimensions

Dimension Range sliderSliderText inputDate range picker
UI or UX UI + UX - Two-boundary numeric range controlUI + UX - Single-value bounded range controlUI + UX - Single-line freeform data-entry controlUI + UX - Two date fields with attached range calendar and apply controls
UI guidance Render two endpoint thumbs on one track with a persistent label, selected range band, visible minimum and maximum endpoint values, unit, min and max labels, focus states, and disabled or read-only states.Render one thumb on a track with a persistent label, visible current value, unit, min and max labels, focus state, and disabled or read-only state.Render a persistent label, appropriately sized single-line input, optional hint, visible focus state, and nearby error text that is programmatically associated with the field.Render separate labelled start and end date fields with persistent format hints, a calendar trigger, and a shared calendar menu that shows both endpoints and the days between them.
UX guidance Help users quickly narrow one numeric scale by setting both lower and upper limits while seeing the resulting active range.Help users adjust one bounded value quickly when the relative position or intensity matters.Use text input for short freeform answers that users can type or paste and that cannot be accurately represented as a fixed option choice.Use a date range picker when users need to select or inspect a continuous period such as a report window, trip, event, booking, campaign, or eligibility span.
Good UI A nightly price range slider shows Minimum $120 and Maximum $280, a selected band between the thumbs, $0 and $500 endpoints, and paired endpoint fields.A Brightness slider shows 55%, dim and bright endpoint labels, visible focus, and a paired number input.A reference-name field has a visible label, hint, medium width, focus ring, and error message beneath the hint when submitted empty.An analytics report control shows Since and Until text fields, quick choices for Today and Last 7 days, a two-week calendar grid, selected August 3 start, selected August 14 end, and a filled band for days inside the range.
Bad UI A filter labelled Budget has one thumb and stores only a minimum price.An unlabeled rail has no visible value, min, max, or unit.The only instruction is placeholder text that disappears when the user starts typing.A report filter has one field labelled Date and silently stores two dates separated by a dash with no start or end labels.
Good UX A user raises the minimum price, lowers the maximum price, sees the result count narrow, then widens the range after a few-results warning.A user adjusts brightness with arrow keys, types 65 in the number field, sees both controls synchronize, and gets a warning near battery-heavy values.A user types or pastes a short reference, submits it, and the interface confirms the stored value without changing their wording.A user chooses Last 7 days, sees 2026-08-08 through 2026-08-14 filled in the calendar, reviews both inputs, then applies the range.
Bad UX A user drags the lower handle beyond the upper handle and the filter submits an impossible range.A user tries to enter $812.37 with a huge slider and cannot land on the exact cents.Validation fires on the first focus event and blocks typing before the user has had a chance to answer.A dashboard refreshes on every hovered day while the user is still deciding the end date.
Best fit Users need a lower and upper bound on one numeric scale.Users adjust one bounded value such as brightness, volume, opacity, zoom, intensity, cost tolerance, or preference strength.The answer is short and user-authored.Users need to select a reporting, analytics, booking, scheduling, campaign, or eligibility period.
Avoid when Users choose only one value.Users need to enter an exact, arbitrary, or high-stakes number.The answer is a paragraph, comment, address block, or explanation requiring multiple lines.The task asks for only one exact date.
Required state Initial state with visible label, min, max, unit, current lower endpoint, and current upper endpoint.Initial value state with visible label, min, max, current value, and unit.Empty untouched state with persistent label and optional hint.Empty start and end fields with visible labels, date-format hints, and a calendar trigger.
Accessibility burden Expose each thumb as a separate slider with a clear endpoint name such as Minimum price and Maximum price.Prefer native range input where possible.Associate every text input with a visible label or equivalent accessible name that matches the visible question.Label start and end fields separately and associate each hint and error with the correct field.
Common misuse Using only one thumb for a task that needs two boundaries.Using a slider for a binary on/off choice.Using placeholder text as the only label or instruction.Using two unrelated single-date pickers that do not validate order or show included days.

Range slider

UI or UX
UI + UX - Two-boundary numeric range control
UI guidance
Render two endpoint thumbs on one track with a persistent label, selected range band, visible minimum and maximum endpoint values, unit, min and max labels, focus states, and disabled or read-only states.
UX guidance
Help users quickly narrow one numeric scale by setting both lower and upper limits while seeing the resulting active range.
Good UI
A nightly price range slider shows Minimum $120 and Maximum $280, a selected band between the thumbs, $0 and $500 endpoints, and paired endpoint fields.
Bad UI
A filter labelled Budget has one thumb and stores only a minimum price.
Good UX
A user raises the minimum price, lowers the maximum price, sees the result count narrow, then widens the range after a few-results warning.
Bad UX
A user drags the lower handle beyond the upper handle and the filter submits an impossible range.
Best fit
Users need a lower and upper bound on one numeric scale.
Avoid when
Users choose only one value.
Required state
Initial state with visible label, min, max, unit, current lower endpoint, and current upper endpoint.
Accessibility burden
Expose each thumb as a separate slider with a clear endpoint name such as Minimum price and Maximum price.
Common misuse
Using only one thumb for a task that needs two boundaries.

Slider

UI or UX
UI + UX - Single-value bounded range control
UI guidance
Render one thumb on a track with a persistent label, visible current value, unit, min and max labels, focus state, and disabled or read-only state.
UX guidance
Help users adjust one bounded value quickly when the relative position or intensity matters.
Good UI
A Brightness slider shows 55%, dim and bright endpoint labels, visible focus, and a paired number input.
Bad UI
An unlabeled rail has no visible value, min, max, or unit.
Good UX
A user adjusts brightness with arrow keys, types 65 in the number field, sees both controls synchronize, and gets a warning near battery-heavy values.
Bad UX
A user tries to enter $812.37 with a huge slider and cannot land on the exact cents.
Best fit
Users adjust one bounded value such as brightness, volume, opacity, zoom, intensity, cost tolerance, or preference strength.
Avoid when
Users need to enter an exact, arbitrary, or high-stakes number.
Required state
Initial value state with visible label, min, max, current value, and unit.
Accessibility burden
Prefer native range input where possible.
Common misuse
Using a slider for a binary on/off choice.

Text input

UI or UX
UI + UX - Single-line freeform data-entry control
UI guidance
Render a persistent label, appropriately sized single-line input, optional hint, visible focus state, and nearby error text that is programmatically associated with the field.
UX guidance
Use text input for short freeform answers that users can type or paste and that cannot be accurately represented as a fixed option choice.
Good UI
A reference-name field has a visible label, hint, medium width, focus ring, and error message beneath the hint when submitted empty.
Bad UI
The only instruction is placeholder text that disappears when the user starts typing.
Good UX
A user types or pastes a short reference, submits it, and the interface confirms the stored value without changing their wording.
Bad UX
Validation fires on the first focus event and blocks typing before the user has had a chance to answer.
Best fit
The answer is short and user-authored.
Avoid when
The answer is a paragraph, comment, address block, or explanation requiring multiple lines.
Required state
Empty untouched state with persistent label and optional hint.
Accessibility burden
Associate every text input with a visible label or equivalent accessible name that matches the visible question.
Common misuse
Using placeholder text as the only label or instruction.

Date range picker

UI or UX
UI + UX - Two date fields with attached range calendar and apply controls
UI guidance
Render separate labelled start and end date fields with persistent format hints, a calendar trigger, and a shared calendar menu that shows both endpoints and the days between them.
UX guidance
Use a date range picker when users need to select or inspect a continuous period such as a report window, trip, event, booking, campaign, or eligibility span.
Good UI
An analytics report control shows Since and Until text fields, quick choices for Today and Last 7 days, a two-week calendar grid, selected August 3 start, selected August 14 end, and a filled band for days inside the range.
Bad UI
A report filter has one field labelled Date and silently stores two dates separated by a dash with no start or end labels.
Good UX
A user chooses Last 7 days, sees 2026-08-08 through 2026-08-14 filled in the calendar, reviews both inputs, then applies the range.
Bad UX
A dashboard refreshes on every hovered day while the user is still deciding the end date.
Best fit
Users need to select a reporting, analytics, booking, scheduling, campaign, or eligibility period.
Avoid when
The task asks for only one exact date.
Required state
Empty start and end fields with visible labels, date-format hints, and a calendar trigger.
Accessibility burden
Label start and end fields separately and associate each hint and error with the correct field.
Common misuse
Using two unrelated single-date pickers that do not validate order or show included days.
Decision rules
  • Prefer a range slider when users need to set both lower and upper numeric limits on one known scale, such as price, distance, duration, rating, or departure time.
  • Prefer a single slider when users adjust one value, not a minimum and maximum pair.
  • Prefer text input or paired number fields when users need exact arbitrary endpoints, pasted values, financial precision, very large ranges, or endpoints outside a fixed UI scale.
  • Prefer date range picker when the endpoints are calendar dates, unavailable days, date formats, time zones, or booking rules rather than numeric positions.
  • Keep both thumbs focusable and separately named, and keep tab order stable even if visual positions get close.
  • Prevent or repair crossed endpoints; if the lower endpoint depends on the upper endpoint, update aria-valuemax and aria-valuemin accordingly.
  • Pair range sliders with visible endpoint values or number inputs when the submitted min and max must be reviewed.
  • Show min, max, unit, current range, step size, result count, empty-result state, disabled/read-only state, and validation or repair feedback near the control.
  • Do not use a range slider for a small set of named options; use radios, checkboxes, select, or segmented controls where labels are visible.
  • Do not use a range slider for hidden filtering that immediately removes results without showing the active range or a reset path.
Inspect live examples
Range sliderSliderText inputDate range picker
Failure modes
  • Only one handle is available, so users can set a minimum but not a maximum.
  • The minimum thumb can cross above the maximum thumb, producing an impossible range.
  • The submitted endpoints are hidden, so users cannot review what filter was applied.
  • Dates are mapped onto a numeric rail and lose calendar semantics, unavailable dates, and typed-date fallback.
  • The range slider filters to zero results without a visible warning or widening action.
  • The two thumbs change visual order and the tab order changes unexpectedly.