Build faster with Premium Chakra UI Components 💎

Learn more
Skip to Content
DocsEnterpriseBlogShowcase
Sponsor

Slider

Used to allow users to make selections from a range of values.

SourceStorybookRecipeArk

Setup

If you don't already have the snippet, run the following command to add the slider snippet

chakra snippet add slider

The snippet includes a closed component composition for the Slider component.

Usage

import { Slider } from "@/components/ui/slider"
<Slider defaultValue={[40]} />

Examples

Sizes

Use the size prop to change the size of the slider.

Variants

Use the variant prop to change the visual style of the slider.

Colors

Use the colorPalette prop to change the color of the slider.

Label

Use the label prop to add a label to the slider.

Range Slider

Set the value or defaultValue prop to an array to create a range slider.

Controlled

Use the value and onValueChange props to control the value of the slider.

Hook Form

Here's an example of how to integrate a slider with react-hook-form.

Disabled

Use the disabled prop to disable the slider.

Change End

Use the onValueChangeEnd prop to listen to the end of the slider change.

onChange: 50onChangeEnd: 50

Steps

Use the step prop to set the step value of the slider.

Thumb Contained

Use the thumbAlignment and thumbSize prop to contain the thumb within the track.

Marks

Use the marks prop to display marks on the slider.

size = sm

size = md

size = lg

Vertical

Use the orientation prop to change the orientation of the slider.

Props

PropDefaultType
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.

orientation 'horizontal'
'vertical' | 'horizontal'

The orientation of the component

origin '\'start\''
'center' | 'start'

The origin of the slider range - "start": Useful when the value represents an absolute value - "center": Useful when the value represents an offset (relative)

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.

colorPalette 'gray'
'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink' | 'accent'

The color palette of the component

size 'md'
'xs' | 'sm' | 'md' | 'lg'

The size of the component

variant 'outline'
'outline' | 'subtle'

The variant of the component

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 it is first rendered. Use when you do not need to control the state of the slider picker.

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 range slider. Useful for composition.

invalid
boolean

Whether the slider is invalid

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

readOnly
boolean

Whether the slider is read-only

thumbSize
{ width: number; height: number }

The slider thumbs dimensions

value
number[]

The value of the range slider

Previous

Skeleton

Next

Spinner