A native range input with a consistent touch target. These classes belong to the opt-in Official preset. Add
@presets "standard,official"; to the CSS entry. Standard supplies the utilities, palette, and preflight
used alongside these structural shortcuts.
Classes
range,range--vertical
Example
The markup below shows the structure. Follow the linked Storybook specimen for its complete styling and, where relevant, interactive behavior.
<label for="volume">Volume</label>
<input id="volume" class="range" type="range" min="0" max="100" value="40">
<output for="volume">40%</output>Variants and composition
range is horizontal by default; range–vertical opts into a vertical control while retaining browser keyboard and form behavior.
Behavior and accessibility
The native input retains track, thumb, keyboard, and form behavior. Provide a label and readable current value; check the focus outline against surrounding colors.
Keyboard focus restores full opacity and a solid 2px outline with a 2px offset. Leave room around the control so the outline is not clipped. The example’s output is an initial value; update it on input if it should announce or display changes.
Reference
See the interactive Storybook specimen. Continue to Rating or return to the Official preset overview.