Slider

A control element that allows for a range of selections.

You can explore the slider component in the following curated examples.

Slider with Number Input

Render a Slider with a Tooltip that shows the current value of the Slider.

Slider with Tooltip

Render a Slider with a Tooltip that shows the current value of the Slider.

Anatomy

<Slider.Root>
  <Slider.Label />
  <Slider.ValueText />
  <Slider.Control>
    <Slider.Track>
      <Slider.Range />
    </Slider.Track>
    <Slider.Thumb>
      <Slider.HiddenInput />
    </Slider.Thumb>
  </Slider.Control>
  <Slider.MarkerGroup>
    <Slider.Marker />
  </Slider.MarkerGroup>
</Slider.Root>

Examples

Range

You can add multiple thumbs to the slider by adding multiple Slider.Thumb

Marks

You can add marks to the slider track by using the Slider.MarkerGroup and Slider.Marker components.

Position the Slider.Marker components relative to the track by providing the value prop.

Min and Max

By default, the minimum is 0 and the maximum is 100. If that's not what you want, you can easily specify different bounds by changing the values of the min and/or max props.

For example, to ask the user for a value between -10 and 10, you can use:

Granularity

By default, the granularity, is 1, meaning that the value is always an integer. You can change the step attribute to control the granularity.

For example, If you need a value between 5 and 10, accurate to two decimal places, you should set the value of step to 0.01:

Change Events

When the slider value changes, the onValueChange and onValueChangeEnd callbacks are invoked. You can use this to set up custom behaviors in your app.

Orientation

By default, the slider is assumed to be horizontal. To change the orientation to vertical, set the orientation property in the machine's context to vertical.

In this mode, the slider will use the arrow up and down keys to increment/decrement its value.

Don't forget to change the styles of the vertical slider by specifying its height

Origin

By default, the slider's origin is at the start of the track. To change the origin to the center of the track, set the origin prop to center.

Root Provider

An alternative way to control the slider is to use the RootProvider component and the useSlider hook. This way you can access the state and methods from outside the component.

Dragging Indicator

Use the Slider.DraggingIndicator component inside Slider.Thumb to show a visual indicator while the thumb is being dragged.

Thumb Overlap

Use the minStepsBetweenThumbs prop to prevent range slider thumbs from overlapping. This ensures a minimum gap between thumbs, which is useful for price range filters and similar use cases.

API Reference

Props

Root

Renders a <div> element.

Prop	Default	Type
`aria-label`		`string[]` The aria-label of each slider thumb. Useful for providing an accessible name to the slider
`aria-labelledby`		`string[]` The `id` of the elements that labels each slider thumb. Useful for providing an accessible name to the slider
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.
`defaultValue`		`number[]` The initial value of the slider when rendered. Use when you don't need to control the value of the slider.
`disabled`		`boolean` Whether the slider is disabled
`form`		`string` The associate form of the underlying input element.
`getAriaValueText`		`(details: ValueTextDetails) => string` Function that returns a human readable value for the slider thumb
`id`		`string` The unique identifier of the machine.
`ids`		`Partial<{ root: string thumb: (index: number) => string hiddenInput: (index: number) => string control: string track: string range: string label: string valueText: string marker: (index: number) => string }>` The ids of the elements in the slider. Useful for composition.
`invalid`		`boolean` Whether the slider is invalid
`max`	`100`	`number` The maximum value of the slider
`min`	`0`	`number` The minimum value of the slider
`minStepsBetweenThumbs`	`0`	`number` The minimum permitted steps between multiple thumbs. `minStepsBetweenThumbs` * `step` should reflect the gap between the thumbs. - `step: 1` and `minStepsBetweenThumbs: 10` => gap is `10` - `step: 10` and `minStepsBetweenThumbs: 2` => gap is `20`
`name`		`string` The name associated with each slider thumb (when used in a form)
`onFocusChange`		`(details: FocusChangeDetails) => void` Function invoked when the slider's focused index changes
`onValueChange`		`(details: ValueChangeDetails) => void` Function invoked when the value of the slider changes
`onValueChangeEnd`		`(details: ValueChangeDetails) => void` Function invoked when the slider value change is done
`orientation`	`'horizontal'`	`'horizontal' \| 'vertical'` The orientation of the slider
`origin`	`'start'`	`'center' \| 'start' \| 'end'` The origin of the slider range. The track is filled from the origin to the thumb for single values. - "start": Useful when the value represents an absolute value - "center": Useful when the value represents an offset (relative) - "end": Useful when the value represents an offset from the end
`readOnly`		`boolean` Whether the slider is read-only
`step`	`1`	`number` The step value of the slider
`thumbAlignment`	`'contain'`	`'center' \| 'contain'` The alignment of the slider thumb relative to the track - `center`: the thumb will extend beyond the bounds of the slider track. - `contain`: the thumb will be contained within the bounds of the track.
`thumbSize`		`{ width: number; height: number }` The slider thumbs dimensions
`value`		`number[]` The controlled value of the slider

Attribute	Description
`[data-scope]`	slider
`[data-part]`	root
`[data-disabled]`	Present when disabled
`[data-orientation]`	The orientation of the slider
`[data-dragging]`	Present when in the dragging state
`[data-invalid]`	Present when invalid
`[data-focus]`	Present when focused

CSS Variable	Description
`--slider-thumb-width`	The thumb width of the slider
`--slider-thumb-height`	The thumb height of the slider
`--slider-thumb-transform`	The thumb transform of the slider
`--slider-range-start`	The range start of the slider
`--slider-range-end`	The range end of the slider
`--translate-x`	The horizontal translation value
`--translate-y`	The vertical translation value

Control

Renders a <div> element.

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Attribute	Description
`[data-scope]`	slider
`[data-part]`	control
`[data-dragging]`	Present when in the dragging state
`[data-disabled]`	Present when disabled
`[data-orientation]`	The orientation of the control
`[data-invalid]`	Present when invalid
`[data-focus]`	Present when focused

DraggingIndicator

Renders a <span> element.

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Attribute	Description
`[data-scope]`	slider
`[data-part]`	dragging-indicator
`[data-orientation]`	The orientation of the draggingindicator
`[data-state]`	"open" \| "closed"

HiddenInput

Renders a <input> element.

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Label

Renders a <label> element.

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Attribute	Description
`[data-scope]`	slider
`[data-part]`	label
`[data-disabled]`	Present when disabled
`[data-orientation]`	The orientation of the label
`[data-invalid]`	Present when invalid
`[data-dragging]`	Present when in the dragging state
`[data-focus]`	Present when focused

MarkerGroup

Renders a <div> element.

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Attribute	Description
`[data-scope]`	slider
`[data-part]`	marker-group
`[data-orientation]`	The orientation of the markergroup

Marker

Renders a <span> element.

Prop	Default	Type
`value`		`number`
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Attribute	Description
`[data-scope]`	slider
`[data-part]`	marker
`[data-orientation]`	The orientation of the marker
`[data-value]`	The value of the item
`[data-disabled]`	Present when disabled
`[data-state]`

Range

Renders a <div> element.

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Attribute	Description
`[data-scope]`	slider
`[data-part]`	range
`[data-dragging]`	Present when in the dragging state
`[data-focus]`	Present when focused
`[data-invalid]`	Present when invalid
`[data-disabled]`	Present when disabled
`[data-orientation]`	The orientation of the range

RootProvider

Renders a <div> element.

Prop	Default	Type
`value`		`UseSliderReturn`
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Thumb

Renders a <div> element.

Prop	Default	Type
`index`		`number`
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.
`name`		`string`

Attribute	Description
`[data-scope]`	slider
`[data-part]`	thumb
`[data-index]`	The index of the item
`[data-name]`
`[data-disabled]`	Present when disabled
`[data-orientation]`	The orientation of the thumb
`[data-focus]`	Present when focused
`[data-dragging]`	Present when in the dragging state

Track

Renders a <div> element.

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Attribute	Description
`[data-scope]`	slider
`[data-part]`	track
`[data-disabled]`	Present when disabled
`[data-invalid]`	Present when invalid
`[data-dragging]`	Present when in the dragging state
`[data-orientation]`	The orientation of the track
`[data-focus]`	Present when focused

ValueText

Renders a <div> element.

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Attribute	Description
`[data-scope]`	slider
`[data-part]`	value-text
`[data-disabled]`	Present when disabled
`[data-orientation]`	The orientation of the valuetext
`[data-invalid]`	Present when invalid
`[data-focus]`	Present when focused

Context

API

Property	Type
`value`	`number[]` The value of the slider.
`dragging`	`boolean` Whether the slider is being dragged.
`focused`	`boolean` Whether the slider is focused.
`setValue`	`(value: number[]) => void` Function to set the value of the slider.
`getThumbValue`	`(index: number) => number` Returns the value of the thumb at the given index.
`setThumbValue`	`(index: number, value: number) => void` Sets the value of the thumb at the given index.
`getValuePercent`	`(value: number) => number` Returns the percent of the thumb at the given index.
`getPercentValue`	`(percent: number) => number` Returns the value of the thumb at the given percent.
`getThumbPercent`	`(index: number) => number` Returns the percent of the thumb at the given index.
`setThumbPercent`	`(index: number, percent: number) => void` Sets the percent of the thumb at the given index.
`getThumbMin`	`(index: number) => number` Returns the min value of the thumb at the given index.
`getThumbMax`	`(index: number) => number` Returns the max value of the thumb at the given index.
`increment`	`(index: number) => void` Function to increment the value of the slider at the given index.
`decrement`	`(index: number) => void` Function to decrement the value of the slider at the given index.
`focus`	`VoidFunction` Function to focus the slider. This focuses the first thumb.

Accessibility

Complies with the Slider WAI-ARIA design pattern.

Keyboard Support

Key	Description
`ArrowRight`	Increments the slider based on defined step
`ArrowLeft`	Decrements the slider based on defined step
`ArrowUp`	Increases the value by the step amount.
`ArrowDown`	Decreases the value by the step amount.
`PageUp`	Increases the value by a larger step
`PageDown`	Decreases the value by a larger step
`Shift + ArrowUp`	Increases the value by a larger step
`Shift + ArrowDown`	Decreases the value by a larger step
`Home`	Sets the value to its minimum.
`End`	Sets the value to its maximum.