Use a range slider for two numeric boundaries on one ordered scale, a slider for one value, text inputs for precise arbitrary endpoints, and a date range picker for calendar boundaries.
Use a range slider for two numeric boundaries on one ordered scale, a slider for one value, text inputs for precise arbitrary endpoints, and a date range picker for calendar boundaries.
Practice the judgment: Imagine this situation: The minimum thumb can cross above the maximum thumb, producing an impossible range. Write the person's goal, choose one of these patterns, and show the state that helps the person continue. Use the decision rules and source trail below to explain your choice.
Review the underlying principle →| Dimension | Range slider | Slider | Text input | Date range picker |
|---|---|---|---|---|
| UI or UX | UI + UX - Two-boundary numeric range control | UI + UX - Single-value bounded range control | UI + UX - Single-line freeform data-entry control | UI + 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. | Let users edit normally, validate after interaction or attempted submit, preserve their typed value after errors, and explain exactly how to fix invalid or missing text. | 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. | A two-stop slider is styled like a switch but lacks on/off semantics. | The only instruction is placeholder text that disappears when the user starts typing. | A calendar highlights only the first and last dates, leaving included days visually indistinguishable from unselected days. |
| 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 leaves the required field blank, sees an error only after submit, returns to the same field, and their later typed value clears the error. | 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 is asked to choose Small, Medium, or Large through a numeric rail with hidden labels. | 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. | Collapsing the range into one unlabeled field with ambiguous dash-separated dates. |