Slider

The Slider is used to allow users to make selections from a range of values.

    SourceTheme source@chakra-ui/slider

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#

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.

Note: We recommend adding a aria-label or aria-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#

<Slider
aria-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'>
<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)
const labelStyles = {
mt: '2',
ml: '-2.5',
fontSize: 'sm',
}
return (
<Box p={4} pt={6}>
<Slider aria-label='slider-ex-6' onChange={(val) => setSliderValue(val)}>
<SliderMark value={25} {...labelStyles}>
25%
</SliderMark>
<SliderMark value={50} {...labelStyles}>
50%
</SliderMark>
<SliderMark value={75} {...labelStyles}>
75%
</SliderMark>
<SliderMark
value={sliderValue}
textAlign='center'
bg='blue.500'
color='white'
mt='-10'
ml='-5'
w='12'
>
{sliderValue}%
</SliderMark>
<SliderTrack>
<SliderFilledTrack />
</SliderTrack>
<SliderThumb />
</Slider>
</Box>
)
}

And you can also use Tooltip with SliderThumb

function SliderThumbWithTooltip() {
const [sliderValue, setSliderValue] = React.useState(5)
const [showTooltip, setShowTooltip] = React.useState(false)
return (
<Slider
id='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>
<Tooltip
hasArrow
bg='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#

The useSlider hook is exported with state and focus management logic for use in creating tailor-made slider component for your application. Read more about the useSlider hook here.

Proudly made inNigeria by Segun Adebayo

Deployed by â–² Vercel