Forms

Slider

A range slider on a native input[type=range].

stableNo JS requiredBuilt on <input type="range">hydrateless/slider.css

A range slider styled with the hl-slider primitive. It is a native <input type="range">, so keyboard support, step increments, and form values all come built in. No JavaScript.

Playground

Live

Value

50

Disabled

Props

The framework bindings expose these props (and forward the rest to the root element).

Prop	Type	Default	Description
min	number	0	Minimum value.
max	number	100	Maximum value.
value	number	—	Controlled value; pair with `onValueChange`.

CSS variables

Override these on any ancestor to theme the component. See the theme studio to preview changes live.

CSS variable	Used for
--hl-primary	Filled track and thumb color.
--hl-border	Empty track color.

Accessibility

• A native range input exposes value, min, max, and step to assistive tech.
• Arrow keys, Home, End, and Page Up/Down all adjust the value natively.

Related

ProgressA progress bar built on the native <progress> element.FieldAn accessible layout wrapper for one form control.