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.

Marks

You can add marks that will be shown on the track underneath the slider.

Disabling

The slider can be disabled using the defaultDisabled prop.

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.

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.

Component API

NameDescriptionDefault
id
string
The ID referenced by the global component state.
defaultValue
number
The slider value on initial render. Default value for the slider.
defaultDisabled
boolean
The slider's disabled state on initial render.
validate
((value: number) => number | undefined) | Array<(value: number) => number | undefined>
A single function or an array of functions that validate the input value.
required
boolean
Adds red asterisk on the right side of label and sets required on input element
false
onChange
((value: number) => void) & ((value: number) => void)
Function that is called each time the value changes.
color
"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.
size
"sm" | "md" | "lg"
Size of the slider.
md
radius
number | "xs" | "sm" | "md" | "lg" | "xl"
Border radius of the slider.
disabled
boolean
Whether the slider is disabled.
inverted
boolean
Whether the slider is inverted.
value
number
Selected value if using this component as a controlled component. Prefer to use the component state to get the value.
marks
{ value: number; label?: ReactNode; }[]
Marks will be shown on the track of the slider.
max
number
Maximum value of the slider.
100
min
number
Minimum value of the slider.
0
step
number
Number to increment/decrement the value by when the slider is dragged or changed using arrows.
1
label
Component
Label displayed above the slider.
error
Component
Displays error message underneath the slider component. Can be a string or a React component.
valueLabel
ReactNode | ((value: number) => ReactNode)
Function to generate a label for the slider.
valueLabelDisplay
"on" | "off" | "auto"
auto: label is shown on hover and focus. on: label is always shown. off: label is never shown.
auto
onChangeEnd
(value: number) => void
Function that is called when the user stops dragging the slider/changing values.
width
number | "content" | "auto" | `${number}%` | `${number}/${number}` | { xs?: ColWidth; sm?: ColWidth; md?: ColWidth; lg?: ColWidth; xl?: ColWidth; }
Width of the component. This component must be a direct child of a <Stack> for this prop to take effect. If an integer is specified, signifies the width in a 12 item grid. 12 means that the component takes up the entire row, 6 is half, 1 is 1/12. If a decimal or fraction is specified, signifies the fractional share of the row. e.g. 1/2 takes up half of the row. If a percentage is specified, signifies the percentage share of the row. e.g. "50%" takes up half of the row. content indicates that the component should take up as much space as its content. auto indicates that the component should take any leftover space on the row. To set width based on the screen size, use an object with a specific width for each breakpoint. e.g. {xs: "100%", md: "50%"} sets the width on xs-md screens to 100% and md and larger screens to 50%.
content
offset
number | `${number}%` | `${number}/${number}` | { xs?: ColOffset; sm?: ColOffset; md?: ColOffset; lg?: ColOffset; xl?: ColOffset; }
Creates a gap to the left of the component. Has the same units as width. This component must be a direct child of a <Stack> for this prop to take effect. If an integer is specified, signifies the offset in a 12 item grid. 6 means the component is offset by half a row, 1 is 1/12 of a row. If a decimal or fraction is specified, signifies the fractional share of the row. e.g. 1/2 offsets a component by half of the row. If a percentage is specified, signifies the percentage share of the row. e.g. "50%" offsets a component by half of the row. To set offset based on the screen size, use an object with a specific offset for each breakpoint. e.g. {xs: "50%", md: "0%"} sets the offset on xs-md screens to 50% and md and larger screens to 0%.

State API

NameDescription
value
number
The number currently selected by the slider
setValue
(value: number) => void
Sets the value of the slider
disabled
boolean
Whether the slider is disabled
setDisabled
(disabled?: boolean) => void
Sets the disabled value of the slider. If the `disabled` value is not provided, the slider will be disabled