Slider

Open in Playground

min, max, step and showValue; onChange receives a number. orientation="vertical" stands it upright (length sets its height in px). buffered adds a lighter band up to a second value, like the loaded part of a video. Pass valueLabel to show a formatted value in a popover above the thumb while it is dragged or moved with the keyboard.

Giggle volume40

Banana song

Banana song playback20

Props

labelstring
Label text.
valuenumber
Current value.
onChange(value: number) => void
Called with the new number.
minnumber
Default: 0
Minimum.
maxnumber
Default: 100
Maximum.
stepnumber
Default: 1
Step.
showValueboolean
Default: true
Show the value beside the label.
bufferednumber
Draws a lighter band from the thumb up to this value, like the loaded part of a video seek bar.
orientation'horizontal' | 'vertical'
Default: 'horizontal'
A vertical slider has its minimum at the bottom.
lengthnumber
Default: 112
Height in px of a vertical slider.
valueLabel(value: number) => ReactNode
Formats the value shown in a popover above the thumb while dragging or using the keyboard.
classNamestring
Default: ''
Extra classes for the root element.
...rest
Any other props are passed to the underlying element.

Slider props
Prop	Type	Default	Description
`label`	string	–	Label text.
`value`	number	–	Current value.
`onChange`	(value: number) => void	–	Called with the new number.
`min`	number	`0`	Minimum.
`max`	number	`100`	Maximum.
`step`	number	`1`	Step.
`showValue`	boolean	`true`	Show the value beside the label.
`buffered`	number	–	Draws a lighter band from the thumb up to this value, like the loaded part of a video seek bar.
`orientation`	'horizontal' \| 'vertical'	`'horizontal'`	A vertical slider has its minimum at the bottom.
`length`	number	`112`	Height in px of a vertical slider.
`valueLabel`	(value: number) => ReactNode	–	Formats the value shown in a popover above the thumb while dragging or using the keyboard.
`className`	string	`''`	Extra classes for the root element.
`...rest`		–	Any other props are passed to the underlying element.