Option slider

Drag the thumb, or press a stop to jump straight to it. Once the slider has focus, the keyboard does the rest. Right or Up steps one level higher, Left or Down one lower, and Home and End jump to Low and Max. Page Up, Page Down and Shift with an arrow also move one level. Each step is already a whole level, so there’s nothing bigger to jump by.

Where it comes from

I built the option slider for Wander’s design system in June 2026, for picking one option from a short, ordered set. When the options need visible labels or have no real order, Wander’s docs point to a toggle group instead. I think the five levels here are close to the ideal case: they only make sense in order, and one readout can name the current level. This is a port, with the same Base UI slider underneath, the same fixed 32px cell for each stop and the same behavior.

What changed here

• This site’s tokens. Wander’s Tailwind classes became StyleX, drawn from this site’s monochrome palette. Track, trail, dots and thumb keep the same order of emphasis in light and dark.
• Five stops. Wander’s version accepts three or four options and throws on anything else, so five levels needed a wider range. This port accepts three to six.
• This site’s focus ring. Keyboard focus draws this site’s 2px outline around the thumb.

Details

• Starts at the default. The slider starts on Medium, and the readout says “Medium · Default”. Without the label, Medium would look like any other stop instead of the one you get by leaving it alone.
• Reset keeps focus. Reset sits in the bottom corner and is disabled at the default. It stays focusable while disabled, so pressing it keeps focus on the button instead of losing it.
• Hover preview. Point at a later stop and the dots up to it match the ones behind the thumb, showing how far a press would take it.

Accessibility

• Named by its label. The slider takes its accessible name, “Effort”, from the visible label beside it.
• Levels by name. Screen readers get each level’s name as value text, like “High”. The readout is hidden from them, so the default stop says “Medium (default)” itself.
• Silent dots. The dots are decorative and hidden from assistive tech, since the value text already names the level.

Not yet verified

Spoken output in VoiceOver, NVDA and JAWS. Touch dragging on real phones. Firefox. Right-to-left layouts, where the pointer math mirrors but nothing here exercises it.