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

36 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.