The static string to use used for `aria-label` if no visible label is used.
Slider
The Slider
is used to allow users to make selections from a range of values.
Sliders reflect a range of values along a bar, from which users may select a single value. They are ideal for adjusting settings such as volume, brightness, or applying image filters.
Import#
Chakra UI exports 5 components for Slider:
Slider
: The wrapper that provides context and functionality for all children.SliderTrack
: The empty part of the slider that shows the track.SliderFilledTrack
: The filled part of the slider.SliderThumb
: The handle that's used to change the slider value.SliderMark
: The label or mark that shows names for specific slider values
import {Slider,SliderTrack,SliderFilledTrack,SliderThumb,SliderMark,} from '@chakra-ui/react'
Usage#
Note: We recommend adding a
aria-label
oraria-labelledby
prop to provide an accessible label for the Slider.
<Slider aria-label='slider-ex-1' defaultValue={30}><SliderTrack><SliderFilledTrack /></SliderTrack><SliderThumb /></Slider>
Changing the slider color scheme#
<Slider aria-label='slider-ex-2' colorScheme='pink' defaultValue={30}><SliderTrack><SliderFilledTrack /></SliderTrack><SliderThumb /></Slider>
Changing the slider orientation#
<Slideraria-label='slider-ex-3'defaultValue={30}orientation='vertical'minH='32'><SliderTrack><SliderFilledTrack /></SliderTrack><SliderThumb /></Slider>
Customizing the Slider#
Slider
component was designed to be composed to make it easy for you to
customize its styles.
<Slider aria-label='slider-ex-4' defaultValue={30}><SliderTrack bg='red.100'><SliderFilledTrack bg='tomato' /></SliderTrack><SliderThumb boxSize={6}><Box color='tomato' as={MdGraphicEq} /></SliderThumb></Slider>
Discrete Sliders#
Discrete sliders allow you to snap to predefined sets of values. This can be
accomplished using the step
prop.
<Slider defaultValue={60} min={0} max={300} step={30}><SliderTrack bg='red.100'><Box position='relative' right={10} /><SliderFilledTrack bg='tomato' /></SliderTrack><SliderThumb boxSize={6} /></Slider>
Slider with custom labels and marks#
You can have custom labels and marks by using SliderMark
component
function SliderMarkExample() {const [sliderValue, setSliderValue] = useState(50)return (<Slider aria-label='slider-ex-6' onChange={(val) => setSliderValue(val)}><SliderMark value={25} mt='1' ml='-2.5' fontSize='sm'>25%</SliderMark><SliderMark value={50} mt='1' ml='-2.5' fontSize='sm'>50%</SliderMark><SliderMark value={75} mt='1' ml='-2.5' fontSize='sm'>75%</SliderMark><SliderMarkvalue={sliderValue}textAlign='center'bg='blue.500'color='white'mt='-10'ml='-5'w='12'>{sliderValue}%</SliderMark><SliderTrack><SliderFilledTrack /></SliderTrack><SliderThumb /></Slider>)}
And you can also use Tooltip
with SliderThumb
function SliderThumbWithTooltip() {const [sliderValue, setSliderValue] = React.useState(5)const [showTooltip, setShowTooltip] = React.useState(false)return (<Sliderid='slider'defaultValue={5}min={0}max={100}colorScheme='teal'onChange={(v) => setSliderValue(v)}onMouseEnter={() => setShowTooltip(true)}onMouseLeave={() => setShowTooltip(false)}><SliderMark value={25} mt='1' ml='-2.5' fontSize='sm'>25%</SliderMark><SliderMark value={50} mt='1' ml='-2.5' fontSize='sm'>50%</SliderMark><SliderMark value={75} mt='1' ml='-2.5' fontSize='sm'>75%</SliderMark><SliderTrack><SliderFilledTrack /></SliderTrack><TooltiphasArrowbg='teal.500'color='white'placement='top'isOpen={showTooltip}label={`${sliderValue}%`}><SliderThumb /></Tooltip></Slider>)}
Getting the final value when dragging the slider#
Dragging the slider can trigger lots of updates and the user might only be
interested in the final result after sliding is complete. You can use
onChangeEnd
for this.
<Slider aria-label='slider-ex-5' onChangeEnd={(val) => console.log(val)}><SliderTrack><SliderFilledTrack /></SliderTrack><SliderThumb /></Slider>
Configure thumb focus with focusThumbOnChange
#
By default SliderThumb
will receive focus whenever value
changes. You can
opt-out of this behavior by setting the value of focusThumbOnChange
to
false
. This is normally used with a "controlled" slider value.
<Slider aria-label='slider-ex-5' value={value} focusThumbOnChange={false}><SliderTrack><SliderFilledTrack /></SliderTrack><SliderThumb /></Slider>
useSlider#
We've exported the useSlider
hook to help users manage and build custom slider
UIs.
Props#
Slider Props#
The Slider
component wraps all its children in the Box
component, so you can pass all Box
props to change its style.
aria-label
aria-label
string
aria-labelledby
aria-labelledby
The static string `aria-labelledby` that points to the ID of the element that serves as label for the slider
string
aria-valuetext
aria-valuetext
The static string to use used for `aria-valuetext`
string
colorScheme
colorScheme
"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"
"blue"
defaultValue
defaultValue
The initial value of the slider in uncontrolled mode
number
direction
direction
"ltr" | "rtl"
focusThumbOnChange
focusThumbOnChange
If false
, the slider handle will not capture focus when value changes.
boolean
true
getAriaValueText
getAriaValueText
Function that returns the `aria-valuetext` for screen readers. It is mostly used to generate a more human-readable representation of the value for assistive technologies
((value: number) => string)
id
id
The base id
to use for the slider and its components
string
isDisabled
isDisabled
If true
, the slider will be disabled
boolean
isReadOnly
isReadOnly
If true
, the slider will be in `read-only` state
boolean
isReversed
isReversed
If true
, the value will be incremented or decremented in reverse.
boolean
max
max
The maximum allowed value of the slider. Cannot be less than min.
number
100
min
min
The minimum allowed value of the slider. Cannot be greater than max.
number
0
name
name
The name attribute of the hidden input
field.
This is particularly useful in forms
string
onChange
onChange
Function called whenever the slider value changes (by dragging or clicking)
((value: number) => void)
onChangeEnd
onChangeEnd
Function called when the user is done selecting a new value (by dragging or clicking)
((value: number) => void)
onChangeStart
onChangeStart
Function called when the user starts selecting a new value (by dragging or clicking)
((value: number) => void)
size
size
"lg" | "md" | "sm"
"md"
step
step
The step in which increments/decrements have to be made
number
1
value
value
The value of the slider in controlled mode
number
variant
variant
Variants for Slider
are not implemented in the default theme. You can extend the theme to implement them.
string
SliderThumb Props#
SliderThumb
composes Box so you can pass all Box
props
to change its style.
SliderFilledTrack Props#
SliderFilledTrack
composes Box so you can pass all Box
props to change its style.
SliderTrack Props#
SliderTrack
composes Box so you can pass all Box
props
to change its style.