Chakra UI Range Slider - Horizon UI
v1.6.9The RangeSlider
is a multi thumb slider used to select a range of related
values. A common use-case of this component is a price range picker that allows
a user to set the minimum and maximum price.
Import#
Chakra UI exports the following component parts to implement the Range Slider:
RangeSlider
: The wrapper that provides context and functionality for all children.RangeSliderTrack
: The empty part of the slider that shows the track.RangeSliderFilledTrack
: The filled part of the slider.RangeSliderThumb
: The handle that's used to change the slider value.
import {RangeSlider,RangeSliderTrack,RangeSliderFilledTrack,RangeSliderThumb,} from "@chakra-ui/react"
Usage#
Note: We recommend adding a
aria-label
oraria-labelledby
prop to provide an accessible label for the Slider.
<RangeSlider aria-label={["min", "max"]} defaultValue={[10, 30]}><RangeSliderTrack><RangeSliderFilledTrack /></RangeSliderTrack><RangeSliderThumb index={0} /><RangeSliderThumb index={1} /></RangeSlider>
Changing the slider color scheme#
You can override the color scheme of the slider to any color key specified in
theme.colors
.
<RangeSlideraria-label={["min", "max"]}colorScheme="pink"defaultValue={[10, 30]}><RangeSliderTrack><RangeSliderFilledTrack /></RangeSliderTrack><RangeSliderThumb index={0} /><RangeSliderThumb index={1} /></RangeSlider>
Changing the slider orientation#
By default, the slider orientation is horizontal
. However, if you want to have
it vertical, pass the orientation
prop and set its value to vertical
.
<RangeSlideraria-label={["min", "max"]}colorScheme="pink"defaultValue={[10, 30]}orientation="vertical"minH="32"><RangeSliderTrack><RangeSliderFilledTrack /></RangeSliderTrack><RangeSliderThumb index={0} /><RangeSliderThumb index={1} /></RangeSlider>
Customizing the Slider#
Slider
component was designed to be composed to make it easy for you to
customize its styles.
<RangeSlider aria-label={["min", "max"]} defaultValue={[30, 80]}><RangeSliderTrack bg="red.100"><RangeSliderFilledTrack bg="tomato" /></RangeSliderTrack><RangeSliderThumb boxSize={6} index={0}><Box color="tomato" as={MdGraphicEq} /></RangeSliderThumb><RangeSliderThumb boxSize={6} index={1}><Box color="tomato" as={MdGraphicEq} /></RangeSliderThumb></RangeSlider>
Discrete Sliders#
Discrete sliders allow you to snap to predefined sets of values. This can be
accomplished using the step
prop.
<RangeSlider defaultValue={[120, 240]} min={0} max={300} step={30}><RangeSliderTrack bg="red.100"><RangeSliderFilledTrack bg="tomato" /></RangeSliderTrack><RangeSliderThumb boxSize={6} index={0} /><RangeSliderThumb boxSize={6} index={1} /></RangeSlider>
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.
<RangeSlideraria-label={["min", "max"]}onChangeEnd={(val) => console.log(val)}><RangeSliderTrack><RangeSliderFilledTrack /></RangeSliderTrack><RangeSliderThumb index={0} /><RangeSliderThumb index={1} /></RangeSlider>
useRangeSlider#
We've exported the useRangeSlider
hook to help users manage and build custom
slider UIs.
RangeSliderThumb Props#
RangeSliderThumb
composes Box so you can pass
all Box
props to change its style.
RangeSliderFilledTrack Props#
RangeSliderFilledTrack
composes Box so you can
pass all Box
props to change its style.
RangeSliderTrack Props#
RangeSliderTrack
composes Box so you can pass
all Box
props to change its style.