Slider

The Slider component enables users to select a value from a range of values.

Basic usage
By default, the slider has a min of 0, max of 100, and step size of 1.
tsx
Copied
1
<Slider label="Slide me!" id="mySlider" />
2
<Text>The slider value is {sliderState.value}</Text>

Marks
You can add marks that will be shown on the track underneath the slider.
tsx
Copied
1
<Slider
2
  label="Choose a size"
3
  min={0}
4
  max={4}
5
  marks={[
6
    { value: 0, label: "XS" },
7
    { value: 1, label: "S" },
8
    { value: 2, label: "M" },
9
    { value: 3, label: "L" },
10
    { value: 4, label: "XL" },
11
  ]}
12
/>

Disabling
The slider can be disabled using the defaultDisabled prop.
tsx
Copied
1
<Slider label="My disabled slider" defaultDisabled />

Inverted
You can invert the slider using the inverted prop. An inverted slider will be filled in from the right rather than from the left.
tsx
Copied
1
<Slider label="My inverted slider" inverted />

Value label
By default, a label with the value is shown when hovering over or sliding the slider. You can change the format of the value label using the valueLabel prop and change when the value label is displayed using valueLabelDisplay. Changing the value label will not change the underlying value stored in the slider component's state.
tsx
Copied
1
<Slider label="Value label percent" valueLabel={(value) => `${value}%`} defaultValue={50} />
2
<Slider
3
  label="Value label exponentially scaled"
4
  valueLabel={(value) => 2 ** value}
5
  defaultValue={6}
6
  min={2}
7
  max={10}
8
/>
9
<Slider label="Value label display on" valueLabelDisplay="on" defaultValue={50} />
10
<Slider label="Value label display off" valueLabelDisplay="off" defaultValue={50} />

Component API
color
optional
"primary" | "secondary" | "dark" | "gray" | "red" | "pink" | "grape" | "violet" | "indigo" | "blue" | "cyan" | "teal" | "green" | "lime" | "yellow" | "orange" | "success" | "error" | `primary.${number}` | `secondary.${number}` | `dark.${number}` | `gray.${number}` | `red.${number}` | `pink.${number}` | `grape.${number}` | `violet.${number}` | `indigo.${number}` | `blue.${number}` | `cyan.${number}` | `teal.${number}` | `green.${number}` | `lime.${number}` | `yellow.${number}` | `orange.${number}` | `success.${number}` | `error.${number}`

Color of the slider.

defaultDisabled
optional
boolean

The slider's disabled state on initial render.

defaultValue
optional
number

The slider value on initial render. Default value for the slider.

disabled
optional
boolean

Whether the slider is disabled.

error
optional
React.ReactNode

Displays error message underneath the slider component. Can be a string or a React component.

grow
optional
boolean

If true, the element will grow to fill available space.

This prop works only if the element is a direct child of a Stack.

height
optional
Default
auto
SizingToken | "{number}px"
Defines the height of the component. See SizingToken docs for more details.
id
optional
string

The ID referenced by the global component state.

inverted
optional
boolean

Whether the slider is inverted.

label
optional
React.ReactNode

Label displayed above the slider.

marks
optional
{ value: number; label?: React.ReactNode; }[]

Marks will be shown on the track of the slider.

max
optional
Default
100
number

Maximum value of the slider.

min
optional
Default
0
number

Minimum value of the slider.

onChange
optional
((value: number) => void) & ((value: number) => void)

Function that is called each time the value changes.

onChangeEnd
optional
(value: number) => void

Function that is called when the user stops dragging the slider/changing values.

radius
optional
number | "xs" | "sm" | "md" | "lg" | "xl"

Border radius of the slider.

required
optional
Default
false
boolean

Adds red asterisk on the right side of label and sets required on input element

size
optional
Default
md
"sm" | "md" | "lg"

Size of the slider.

step
optional
Default
1
number

Number to increment/decrement the value by when the slider is dragged or changed using arrows.

validate
optional
((value: number) => number | undefined) | Array<(value: number) => number | undefined>

A single function or an array of functions that validate the input value.

value
optional
number

Selected value if using this component as a controlled component. Prefer to use the component state to get the value.

valueLabel
optional
ReactNode | ((value: number) => ReactNode)

Function to generate a label for the slider.

valueLabelDisplay
optional
Default
auto
"on" | "off" | "auto"

auto: label is shown on hover and focus. on: label is always shown. off: label is never shown.

width
optional
Default
auto
SizingToken | "{number}px"
Defines the width of the component. See SizingToken docs for more details.

State API
disabled
optional
boolean

Whether the slider is disabled

setDisabled
optional
(disabled?: boolean) => void

Sets the disabled value of the slider. If the disabled value is not provided, the slider will be disabled

setValue
optional
(value: number) => void

Sets the value of the slider

value
optional
number

The number currently selected by the slider

PrivacyTermsSupport