slider

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

Usage

Default


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

Props

Sortable data table
Prop	Type	Default	Description
value	number	-	The current value of the slider.
onChange	(event: React.ChangeEvent<HTMLInputElement>) => void	-	Callback fired when the slider value changes.
min	number	0	Minimum value for the slider.
max	number	100	Maximum value for the slider.
step	number	1	Step increment for the slider value.
theme	"primary" \| "secondary" \| "tertiary" \| "quaternary" \| "clear"	Configured Default	Theme color for the slider.
state	"" \| "success" \| "error" \| "warning"	-	Visual state style for the slider.
size	"xs" \| "small" \| "medium" \| "large" \| "xl"	Configured Default	Size of the slider control.
rounding	"none" \| "small" \| "medium" \| "large"	Configured Default	Border radius for the slider.
shadow	"none" \| "light" \| "medium" \| "strong" \| "intense"	Configured Default	Box shadow for the slider.
label	string	-	Label for the slider (for accessibility).
showValue	boolean	true	Show the numeric value next to the slider.
className	string	-	Additional CSS class names.
aria-label	string	-	ARIA label for screen readers.
data-testid	string	"slider"	Test id for querying the component in tests.