slider

The Slider component allows users to select a value from a range.

Usage & Examples

Default

50
default.tsx

const [value, setValue] = useState(50);
<Slider
  min={0}
  max={100}
  step={1}
  value={value}
  onChange={(e) => setValue(Number(e.target.value))}
/>

Props API

33 props
Columns
slider props API
Default
Description
aria-describedbystringNoaria—Id of external element(s) that describe the slider.
aria-invalidboolean | "true" | "false"Noaria—Marks the slider as invalid.
aria-labelstringNoaria—Accessible label for the slider if no visible label is provided.
aria-labelledbystringNoaria—Id of external element(s) that label the slider.
aria-orientation"horizontal" | "vertical"Noaria"horizontal"Orientation of the slider.
aria-requiredboolean | "true" | "false"Noaria—Marks the slider as required for assistive technology.
aria-valuemaxnumberNoaria—Explicit maximum value for assistive technology.
aria-valueminnumberNoaria—Explicit minimum value for assistive technology.
aria-valuenownumberNoaria—Explicit current numeric value for assistive technology.
aria-valuetextstringNoaria—Human-friendly text alternative for the current value.
classNamestringNostyling—Additional CSS class names for custom styling.
data-testidstringNotesting—Backward-compatible alias for test ID attributes.