Slider

Problem Context

• The value has a known lower and upper bound.
• Users understand the answer as position, intensity, amount, or coarse adjustment along a scale.
• The product can choose meaningful step increments and expose the current value in text.
• The task controls one value, not a start and end range.
• Users may still need an exact numeric value, warning, disabled state, or server-side range repair.

Selection Rules

• Choose a slider for one adjustable numeric or relative value inside a known range.
• Use a continuous slider for subjective intensity where exact value is not critical.
• Use a discrete slider when each step is meaningful and users can perceive the difference between steps.
• Pair the slider with a number input or value display when users need exactness, screen-reader clarity, or copyable values.
• Use text input when users need to type a precise, large-range, arbitrary, financial, or pasted value.
• Use select, radio group, or segmented control for a small set of named options.
• Use toggle switch for true on/off settings.
• Use range slider when users must set both a lower and upper boundary.
• Avoid sliders for very large ranges, tiny ranges, binary choices, dates, destructive actions, and values with unclear units.

Required States

• Initial value state with visible label, min, max, current value, and unit.
• Focused thumb state.
• Dragging or actively adjusting state.
• Keyboard increment and larger-step state.
• Discrete tick or step state when only certain values are allowed.
• Exact numeric entry state when precision is needed.
• Warning state for risky or unusual values.
• Out-of-range repaired or validation error state.
• Disabled dependency state.
• Read-only review state.
• Touch assistive technology tested state for custom implementations.

Interaction Contract

• Moving the thumb changes one value within the declared minimum and maximum.
• The current value remains visible in text and matches the thumb position.
• Keyboard arrows adjust by one step; Home and End move to the range limits; Page Up and Page Down may move by larger steps.
• Typed numeric fallback synchronizes with the thumb and uses the same min, max, and step rules.
• Warnings, errors, disabled state, and repaired values are announced without losing the user's context.
• The slider never hides multiple named choices, binary on/off state, or two-boundary range selection behind one thumb.

Implementation Checklist

• Define min, max, step, initial value, unit, precision, and whether values are continuous or discrete.
• Use native input type range when it satisfies the design and accessibility needs.
• Provide a visible label and current value, and expose min, max, now, and value text to assistive technologies.
• Add min and max labels or icons when the endpoints are meaningful.
• Pair with a number input for exact values, large ranges, or values users may need to copy or paste.
• Clamp, reject, or repair out-of-range values with explicit feedback.
• Test keyboard, pointer, touch, screen reader, high zoom, forced colors, and mobile assistive technology behavior.
• Avoid custom slider implementations unless the thumb, track, value text, focus, keyboard, and touch behavior are fully implemented.

Common Generated-UI Mistakes

• Using a slider for a binary on/off choice.
• Using a slider for exact financial, legal, account, or measurement values without a numeric field.
• Hiding a small set of named options behind a numeric rail.
• Using one slider for lower and upper range boundaries.
• Omitting the label, current value, unit, min, or max.
• Choosing a step size that is too fine to move efficiently or too coarse to match user needs.
• Using sliders for dates or categories that are not numeric or ordered.

Critique Questions

• Is this one value inside a known range?
• Do users care about relative position more than entering an exact number?
• Are min, max, step size, current value, and unit visible and programmatic?
• Would a number field, select, radio group, segmented control, toggle, or range slider make the task clearer?
• Does keyboard and touch assistive technology behavior work on the target devices?