Slider

Slider control for selecting a single value or a range.

Examples

Default

Volume

50

function ControlledSingleSlider({
  value: initialValue = 50,
  isOptional,
  isRequired,
  ...args
}: ControlledSingleSliderProps): React.JSX.Element {
  const [value, setValue] = useState(initialValue);

  return (
    <Slider
      {...args}
      {...getNecessity(isOptional, isRequired)}
      onChange={setValue}
      value={value}
    />
  );
}

<ControlledSingleSlider {...args} />

Custom Width

Volume

50

function ControlledSingleSlider({
  value: initialValue = 50,
  isOptional,
  isRequired,
  ...args
}: ControlledSingleSliderProps): React.JSX.Element {
  const [value, setValue] = useState(initialValue);

  return (
    <Slider
      {...args}
      {...getNecessity(isOptional, isRequired)}
      onChange={setValue}
      value={value}
    />
  );
}

<ControlledSingleSlider label="Volume" value={50} width={320} />

Range

Price range

20

80

function ControlledRangeSlider({
  value: initialValue = DEFAULT_RANGE_VALUE,
  isOptional,
  isRequired,
  ...args
}: ControlledRangeSliderProps): React.JSX.Element {
  const [value, setValue] = useState<[number, number]>(initialValue);

  return (
    <Slider
      {...args}
      {...getNecessity(isOptional, isRequired)}
      onChange={setValue}
      value={value}
    />
  );
}

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

With Marks

Completion

0

25

50

75

100

50

function ControlledSingleSlider({
  value: initialValue = 50,
  isOptional,
  isRequired,
  ...args
}: ControlledSingleSliderProps): React.JSX.Element {
  const [value, setValue] = useState(initialValue);

  return (
    <Slider
      {...args}
      {...getNecessity(isOptional, isRequired)}
      onChange={setValue}
      value={value}
    />
  );
}

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

Custom Format

Budget

$250

function ControlledSingleSlider({
  value: initialValue = 50,
  isOptional,
  isRequired,
  ...args
}: ControlledSingleSliderProps): React.JSX.Element {
  const [value, setValue] = useState(initialValue);

  return (
    <Slider
      {...args}
      {...getNecessity(isOptional, isRequired)}
      onChange={setValue}
      value={value}
    />
  );
}

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

Value Display Text

Opacity

60%

function ControlledSingleSlider({
  value: initialValue = 50,
  isOptional,
  isRequired,
  ...args
}: ControlledSingleSliderProps): React.JSX.Element {
  const [value, setValue] = useState(initialValue);

  return (
    <Slider
      {...args}
      {...getNecessity(isOptional, isRequired)}
      onChange={setValue}
      value={value}
    />
  );
}

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

Value Display None

Brightness

function ControlledSingleSlider({
  value: initialValue = 50,
  isOptional,
  isRequired,
  ...args
}: ControlledSingleSliderProps): React.JSX.Element {
  const [value, setValue] = useState(initialValue);

  return (
    <Slider
      {...args}
      {...getNecessity(isOptional, isRequired)}
      onChange={setValue}
      value={value}
    />
  );
}

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

Vertical

Level

65

function ControlledSingleSlider({
  value: initialValue = 50,
  isOptional,
  isRequired,
  ...args
}: ControlledSingleSliderProps): React.JSX.Element {
  const [value, setValue] = useState(initialValue);

  return (
    <Slider
      {...args}
      {...getNecessity(isOptional, isRequired)}
      onChange={setValue}
      value={value}
    />
  );
}

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

Disabled

Disabled volume

50

function ControlledSingleSlider({
  value: initialValue = 50,
  isOptional,
  isRequired,
  ...args
}: ControlledSingleSliderProps): React.JSX.Element {
  const [value, setValue] = useState(initialValue);

  return (
    <Slider
      {...args}
      {...getNecessity(isOptional, isRequired)}
      onChange={setValue}
      value={value}
    />
  );
}

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

With Status

Volume

90

Volume is above the recommended range.

function ControlledSingleSlider({
  value: initialValue = 50,
  isOptional,
  isRequired,
  ...args
}: ControlledSingleSliderProps): React.JSX.Element {
  const [value, setValue] = useState(initialValue);

  return (
    <Slider
      {...args}
      {...getNecessity(isOptional, isRequired)}
      onChange={setValue}
      value={value}
    />
  );
}

<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

function ControlledRangeSlider({
  value: initialValue = DEFAULT_RANGE_VALUE,
  isOptional,
  isRequired,
  ...args
}: ControlledRangeSliderProps): React.JSX.Element {
  const [value, setValue] = useState<[number, number]>(initialValue);

  return (
    <Slider
      {...args}
      {...getNecessity(isOptional, isRequired)}
      onChange={setValue}
      value={value}
    />
  );
}

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

Custom Step

Step 5

45

Step 0.1

0.5

function ControlledSingleSlider({
  value: initialValue = 50,
  isOptional,
  isRequired,
  ...args
}: ControlledSingleSliderProps): React.JSX.Element {
  const [value, setValue] = useState(initialValue);

  return (
    <Slider
      {...args}
      {...getNecessity(isOptional, isRequired)}
      onChange={setValue}
      value={value}
    />
  );
}

<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

function ControlledSingleSlider({
  value: initialValue = 50,
  isOptional,
  isRequired,
  ...args
}: ControlledSingleSliderProps): React.JSX.Element {
  const [value, setValue] = useState(initialValue);

  return (
    <Slider
      {...args}
      {...getNecessity(isOptional, isRequired)}
      onChange={setValue}
      value={value}
    />
  );
}

<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"
/>

Read Only

Volume

50

function ControlledSingleSlider({
  value: initialValue = 50,
  isOptional,
  isRequired,
  ...args
}: ControlledSingleSliderProps): React.JSX.Element {
  const [value, setValue] = useState(initialValue);

  return (
    <Slider
      {...args}
      {...getNecessity(isOptional, isRequired)}
      onChange={setValue}
      value={value}
    />
  );
}

<ControlledSingleSlider {...args} />

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.
htmlName	string	—	HTML name attribute for native form submission. Range sliders submit one entry per value.
isDisabled	boolean	false	Whether the slider is disabled.
isReadOnly	boolean	false	Whether the value is displayed without allowing focus or interaction.
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.
width	SizeValue	—	Slider width. Numbers are pixels, strings are used as-is.
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.
htmlName	string	—	HTML name attribute for native form submission. Range sliders submit one entry per value.
isDisabled	boolean	false	Whether the slider is disabled.
isReadOnly	boolean	false	Whether the value is displayed without allowing focus or interaction.
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.
width	SizeValue	—	Slider width. Numbers are pixels, strings are used as-is.
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.
htmlName	string	—	HTML name attribute for native form submission. Range sliders submit one entry per value.
isDisabled	boolean	false	Whether the slider is disabled.
isReadOnly	boolean	false	Whether the value is displayed without allowing focus or interaction.
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.
width	SizeValue	—	Slider width. Numbers are pixels, strings are used as-is.
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.
htmlName	string	—	HTML name attribute for native form submission. Range sliders submit one entry per value.
isDisabled	boolean	false	Whether the slider is disabled.
isReadOnly	boolean	false	Whether the value is displayed without allowing focus or interaction.
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.
width	SizeValue	—	Slider width. Numbers are pixels, strings are used as-is.
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.
htmlName	string	—	HTML name attribute for native form submission. Range sliders submit one entry per value.
isDisabled	boolean	false	Whether the slider is disabled.
isReadOnly	boolean	false	Whether the value is displayed without allowing focus or interaction.
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.
width	SizeValue	—	Slider width. Numbers are pixels, strings are used as-is.
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.
htmlName	string	—	HTML name attribute for native form submission. Range sliders submit one entry per value.
isDisabled	boolean	false	Whether the slider is disabled.
isReadOnly	boolean	false	Whether the value is displayed without allowing focus or interaction.
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.
width	SizeValue	—	Slider width. Numbers are pixels, strings are used as-is.
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.