Slider
The Slider is used to allow users to make selections from a range of values.
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
oraria-labelledby
prop to provide an accessible label for the Slider.
Changing the slider color scheme
Changing the slider orientation
Customizing the Slider
Slider
component was designed to be composed to make it easy for you to
customize its styles.
Discrete Sliders
Discrete sliders allow you to snap to predefined sets of values. This can be
accomplished using the step
prop.
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 pt={6} pb={2}>
<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
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
The static string to use used for `aria-label` if no visible label is used.
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
The writing mode
"ltr" | "rtl"
"ltr"
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.