Slider

Updated: December 23, 2025

The Slider component provides an intuitive way to select a value from a range using a draggable thumb along a track.

Slider

const [value, setValue] = useState(50);

return (
  <Slider
    value={value}
    onChange={setValue}
    min={0}
    max={100}
  />
);

Label

Add a descriptive label to the slider using the label prop.

Label

Volume

<Slider
value={value}
onChange={setValue}
min={0}
max={100}
label="Volume"
/>

Display the current value alongside the label using showValue.

Show value

Brightness75

<Slider
value={value}
onChange={setValue}
min={0}
max={100}
label="Brightness"
showValue
/>

Control the granularity of value changes with the step prop.

With step

Volume50

<Slider
value={value}
onChange={setValue}
min={0}
max={100}
step={10}
label="Volume"
showValue
/>

Define custom minimum and maximum values for your use case.

Custom range

Temperature (°C)20

<Slider
value={value}
onChange={setValue}
min={10}
max={30}
step={1}
label="Temperature (°C)"
showValue
/>

Disable the slider to prevent user interaction.

Disabled

Locked Setting50

<Slider
value={50}
onChange={() => {}}
min={0}
max={100}
label="Locked Setting"
showValue
disabled
/>

Prop	Type	Default
valuerequired Current value	number	—
onChangerequired Callback when value changes	(value: number) => void	—
min	number	0
max	number	100
step	number	1
label Optional label text	string	—
showValue	boolean	false
disabled	boolean	false
className	string	—
style	React.CSSProperties	—
…and every React.InputHTMLAttributes prop	inherited	—

Edit this page on GitHub

Built with curiosity by Lorant One and the Design Engineers Club