Slider

Slider control for selecting a single value or a range.

Examples

Default

Volume

50

<ControlledSingleSlider {...args} />

Range

Price range

20

80

<ControlledRangeSlider label="Price range" value={[20, 80]} />

With Marks

Completion

0

25

50

75

100

50

<ControlledSingleSlider
  label="Completion"
  marks={defaultMarks}
  value={50}
  valueDisplay="text"
/>

Custom Format

Budget

$250

<ControlledSingleSlider
  formatValue={value => `$${value}`}
  label="Budget"
  max={500}
  step={25}
  value={250}
  valueDisplay="text"
/>

Value Display Text

Opacity

60%

<ControlledSingleSlider
  formatValue={value => `${value}%`}
  label="Opacity"
  value={60}
  valueDisplay="text"
/>

Value Display None

Brightness

<ControlledSingleSlider label="Brightness" value={40} valueDisplay="none" />

Vertical

Level

65

<div style={{height: 220}}>
  <ControlledSingleSlider
    label="Level"
    orientation="vertical"
    value={65}
    valueDisplay="text"
  />
</div>

Disabled

Disabled volume

50

<ControlledSingleSlider isDisabled label="Disabled volume" value={50} />

With Status

Volume

90

Volume is above the recommended range.

<ControlledSingleSlider
  label="Volume"
  status={{
    message: 'Volume is above the recommended range.',
    type: 'error',
  }}
  value={90}
  valueDisplay="text"
/>

Min Steps Between Thumbs

Allowed range

30 - 60

<ControlledRangeSlider
  label="Allowed range"
  minStepsBetweenThumbs={2}
  step={5}
  value={[30, 60]}
  valueDisplay="text"
/>

Custom Step

Step 5

45

Step 0.1

0.5

<VStack gap={6}>
  <ControlledSingleSlider
    label="Step 5"
    step={5}
    value={45}
    valueDisplay="text"
  />
  <ControlledSingleSlider
    formatValue={value => value.toFixed(1)}
    label="Step 0.1"
    max={1}
    step={0.1}
    value={0.5}
    valueDisplay="text"
  />
</VStack>

Min Max Custom

Temperature

-50F

0F

100F

200F

70

<ControlledSingleSlider
  label="Temperature"
  marks={[
    {label: '-50F', value: -50},
    {label: '0F', value: 0},
    {label: '100F', value: 100},
    {label: '200F', value: 200},
  ]}
  max={200}
  min={-50}
  step={10}
  value={70}
  valueDisplay="text"
/>

API

Slider

Slider control for selecting a single value or a range.

When isOptional: false, isRequired: false

Prop	Type	Default	Description
className	string	—	Additional CSS class names applied to the field root.
data-testid	string	—	Test ID applied to the field root.
description	string	—	Supporting text displayed below the label.
formatValue	(value: number) => string	—	Custom value formatter used for visible value text, tooltip content, and aria-valuetext.
isDisabled	boolean	false	Whether the slider is disabled.
isLabelHidden	boolean	false	Whether to visually hide the label.
label*	string	—	Field label.
labelTooltip	string	—	Tooltip content shown next to the label.
marks	SliderMark[]	—	Tick marks rendered along the track.
max	number	100	Maximum value.
min	number	0	Minimum value.
orientation	"horizontal" | "vertical"	'horizontal'	Slider orientation.
ref	Ref<HTMLDivElement>	—	Ref forwarded to the field root.
status	InputStatus	—	Validation status displayed below the slider.
step	number	1	Step increment.
style	CSSProperties	—	Inline styles applied to the field root.
valueDisplay	"none" | "text" | "tooltip"	'tooltip'	How to display the current value.
isOptional	false	—
isRequired	false	—
minStepsBetweenThumbs	number	0	Minimum number of steps between range thumbs.
onChange*	(value: [number, number]) => void	—	Called when the range changes during pointer or keyboard interaction.
onChangeEnd	(value: [number, number]) => void	—	Called when pointer or keyboard interaction commits a range.
value*	[number, number]	—	Current range.

When isOptional: true, isRequired: false

Prop	Type	Default	Description
className	string	—	Additional CSS class names applied to the field root.
data-testid	string	—	Test ID applied to the field root.
description	string	—	Supporting text displayed below the label.
formatValue	(value: number) => string	—	Custom value formatter used for visible value text, tooltip content, and aria-valuetext.
isDisabled	boolean	false	Whether the slider is disabled.
isLabelHidden	boolean	false	Whether to visually hide the label.
label*	string	—	Field label.
labelTooltip	string	—	Tooltip content shown next to the label.
marks	SliderMark[]	—	Tick marks rendered along the track.
max	number	100	Maximum value.
min	number	0	Minimum value.
orientation	"horizontal" | "vertical"	'horizontal'	Slider orientation.
ref	Ref<HTMLDivElement>	—	Ref forwarded to the field root.
status	InputStatus	—	Validation status displayed below the slider.
step	number	1	Step increment.
style	CSSProperties	—	Inline styles applied to the field root.
valueDisplay	"none" | "text" | "tooltip"	'tooltip'	How to display the current value.
isOptional*	true	—
isRequired	false	—
minStepsBetweenThumbs	number	0	Minimum number of steps between range thumbs.
onChange*	(value: [number, number]) => void	—	Called when the range changes during pointer or keyboard interaction.
onChangeEnd	(value: [number, number]) => void	—	Called when pointer or keyboard interaction commits a range.
value*	[number, number]	—	Current range.

When isOptional: false, isRequired: true

Prop	Type	Default	Description
className	string	—	Additional CSS class names applied to the field root.
data-testid	string	—	Test ID applied to the field root.
description	string	—	Supporting text displayed below the label.
formatValue	(value: number) => string	—	Custom value formatter used for visible value text, tooltip content, and aria-valuetext.
isDisabled	boolean	false	Whether the slider is disabled.
isLabelHidden	boolean	false	Whether to visually hide the label.
label*	string	—	Field label.
labelTooltip	string	—	Tooltip content shown next to the label.
marks	SliderMark[]	—	Tick marks rendered along the track.
max	number	100	Maximum value.
min	number	0	Minimum value.
orientation	"horizontal" | "vertical"	'horizontal'	Slider orientation.
ref	Ref<HTMLDivElement>	—	Ref forwarded to the field root.
status	InputStatus	—	Validation status displayed below the slider.
step	number	1	Step increment.
style	CSSProperties	—	Inline styles applied to the field root.
valueDisplay	"none" | "text" | "tooltip"	'tooltip'	How to display the current value.
isOptional	false	—
isRequired*	true	—
minStepsBetweenThumbs	number	0	Minimum number of steps between range thumbs.
onChange*	(value: [number, number]) => void	—	Called when the range changes during pointer or keyboard interaction.
onChangeEnd	(value: [number, number]) => void	—	Called when pointer or keyboard interaction commits a range.
value*	[number, number]	—	Current range.

When isOptional: false, isRequired: false

Prop	Type	Default	Description
className	string	—	Additional CSS class names applied to the field root.
data-testid	string	—	Test ID applied to the field root.
description	string	—	Supporting text displayed below the label.
formatValue	(value: number) => string	—	Custom value formatter used for visible value text, tooltip content, and aria-valuetext.
isDisabled	boolean	false	Whether the slider is disabled.
isLabelHidden	boolean	false	Whether to visually hide the label.
label*	string	—	Field label.
labelTooltip	string	—	Tooltip content shown next to the label.
marks	SliderMark[]	—	Tick marks rendered along the track.
max	number	100	Maximum value.
min	number	0	Minimum value.
orientation	"horizontal" | "vertical"	'horizontal'	Slider orientation.
ref	Ref<HTMLDivElement>	—	Ref forwarded to the field root.
status	InputStatus	—	Validation status displayed below the slider.
step	number	1	Step increment.
style	CSSProperties	—	Inline styles applied to the field root.
valueDisplay	"none" | "text" | "tooltip"	'tooltip'	How to display the current value.
isOptional	false	—
isRequired	false	—
onChange*	(value: number) => void	—	Called when the value changes during pointer or keyboard interaction.
onChangeEnd	(value: number) => void	—	Called when pointer or keyboard interaction commits a value.
value*	number	—	Current value.

When isOptional: true, isRequired: false

Prop	Type	Default	Description
className	string	—	Additional CSS class names applied to the field root.
data-testid	string	—	Test ID applied to the field root.
description	string	—	Supporting text displayed below the label.
formatValue	(value: number) => string	—	Custom value formatter used for visible value text, tooltip content, and aria-valuetext.
isDisabled	boolean	false	Whether the slider is disabled.
isLabelHidden	boolean	false	Whether to visually hide the label.
label*	string	—	Field label.
labelTooltip	string	—	Tooltip content shown next to the label.
marks	SliderMark[]	—	Tick marks rendered along the track.
max	number	100	Maximum value.
min	number	0	Minimum value.
orientation	"horizontal" | "vertical"	'horizontal'	Slider orientation.
ref	Ref<HTMLDivElement>	—	Ref forwarded to the field root.
status	InputStatus	—	Validation status displayed below the slider.
step	number	1	Step increment.
style	CSSProperties	—	Inline styles applied to the field root.
valueDisplay	"none" | "text" | "tooltip"	'tooltip'	How to display the current value.
isOptional*	true	—
isRequired	false	—
onChange*	(value: number) => void	—	Called when the value changes during pointer or keyboard interaction.
onChangeEnd	(value: number) => void	—	Called when pointer or keyboard interaction commits a value.
value*	number	—	Current value.

When isOptional: false, isRequired: true

Prop	Type	Default	Description
className	string	—	Additional CSS class names applied to the field root.
data-testid	string	—	Test ID applied to the field root.
description	string	—	Supporting text displayed below the label.
formatValue	(value: number) => string	—	Custom value formatter used for visible value text, tooltip content, and aria-valuetext.
isDisabled	boolean	false	Whether the slider is disabled.
isLabelHidden	boolean	false	Whether to visually hide the label.
label*	string	—	Field label.
labelTooltip	string	—	Tooltip content shown next to the label.
marks	SliderMark[]	—	Tick marks rendered along the track.
max	number	100	Maximum value.
min	number	0	Minimum value.
orientation	"horizontal" | "vertical"	'horizontal'	Slider orientation.
ref	Ref<HTMLDivElement>	—	Ref forwarded to the field root.
status	InputStatus	—	Validation status displayed below the slider.
step	number	1	Step increment.
style	CSSProperties	—	Inline styles applied to the field root.
valueDisplay	"none" | "text" | "tooltip"	'tooltip'	How to display the current value.
isOptional	false	—
isRequired*	true	—
onChange*	(value: number) => void	—	Called when the value changes during pointer or keyboard interaction.
onChangeEnd	(value: number) => void	—	Called when pointer or keyboard interaction commits a value.
value*	number	—	Current value.