RangeSlider
RangeSlider
is a component used for users to select a range of related values.
Import
import {RangeSlider,RangeSliderTrack,RangeSliderFilledTrack,RangeSliderStartThumb,RangeSliderEndThumb,RangeSliderMark,} from "@yamada-ui/react"
RangeSlider
: A wrapper component that controls child elements (RangeSliderTrack
,RangeSliderStartThumb
,RangeSliderEndThumb
).RangeSliderTrack
: A wrapper component that displays the track.RangeSliderFilledTrack
: A component that displays the filled track.RangeSliderStartThumb
: A component of an icon used to change the minimum value of the slider.RangeSliderEndThumb
: A component of an icon used to change the maximum value of the slider.RangeSliderMark
: A component that displays a label or mark at a specific value.
RangeSliderTrack
, RangeSliderFilledTrack
, RangeSliderStartThumb
, and RangeSliderEndThumb
can be omitted.
Usage
Editable example
<RangeSlider />
Change Size
Editable example
<VStack> <RangeSlider size="sm" defaultValue={[0, 25]} /> <RangeSlider size="md" defaultValue={[25, 50]} /> <RangeSlider size="lg" defaultValue={[50, 75]} /> </VStack>
Change Color Scheme
Editable example
<VStack> <RangeSlider colorScheme="secondary" /> <RangeSlider colorScheme="green" /> </VStack>
Set Default Values
To set default values, set [initial value, maximum value]
to defaultValue
. By default, [25, 75]
is set.
Editable example
<RangeSlider defaultValue={[10, 90]} />
Change Orientation
To change the orientation, set orientation
to vertical
or horizontal
. By default, horizontal
is set.
Editable example
<RangeSlider orientation="vertical" h="sm" />
Reverse Direction
To reverse the direction, set isReversed
to true
.
Editable example
<RangeSlider isReversed />
Set Minimum and Maximum Values
To set minimum and maximum values, set a number to min
or max
. By default, min
is 0
and max
is 100
.
Editable example
const [value, onChange] = useState<[number, number]>([50, 150]) return ( <VStack> <Text> Min: {value[0]}, Max: {value[1]} </Text> <RangeSlider value={value} min={0} max={200} onChange={onChange} /> </VStack> )
Set Step Value
To set the step value, set a number to step
.
Editable example
const [value, onChange] = useState<[number, number]>([25, 75]) return ( <VStack> <Text> Min: {value[0]}, Max: {value[1]} </Text> <RangeSlider value={value} step={5} onChange={onChange} /> </VStack> )
Set Minimum Range Between Values
To set the minimum range between values, set a number to betweenThumbs
.
Editable example
<RangeSlider betweenThumbs={10} />
Control Externally Only
To control externally only, set focusThumbOnChange
to false
.
Editable example
const [value, setValue] = useState<[number, number]>([25, 75]) return ( <VStack> <Text> Min: {value[0]}, Max: {value[1]} </Text> <RangeSlider value={value} step={5} focusThumbOnChange={false} /> <Center w="full" gap="xl"> <Flex direction="column" align="center" gap="sm"> <Text>Min</Text> <Center gap="md"> <Button isDisabled={value[0] === 0} onClick={() => setValue((prev) => prev[0] !== 0 ? [prev[0] - 5, prev[1]] : prev, ) } > -5 </Button> <Button isDisabled={value[0] === 100 || value[0] === value[1]} colorScheme="blue" onClick={() => setValue((prev) => prev[0] !== 100 && value[0] !== value[1] ? [prev[0] + 5, prev[1]] : prev, ) } > +5 </Button> </Center> </Flex> <Flex direction="column" align="center" gap="sm"> <Text>Max</Text> <Center gap="md"> <Button isDisabled={value[1] === 0 || value[0] === value[1]} onClick={() => setValue((prev) => prev[1] !== 0 && value[0] !== value[1] ? [prev[0], prev[1] - 5] : prev, ) } > -5 </Button> <Button isDisabled={value[1] === 100} colorScheme="blue" onClick={() => setValue((prev) => prev[1] !== 100 ? [prev[0], prev[1] + 5] : prev, ) } > +10 </Button> </Center> </Flex> </Center> </VStack> )
Disable
To disable, set isDisabled
to true
.
Editable example
<VStack> <RangeSlider isDisabled /> <FormControl isDisabled label="volume (sound)" helperMessage="Please select your preferred volume." > <RangeSlider /> </FormControl> </VStack>
Make Read-Only
To make read-only, set isReadOnly
to true
.
Editable example
<VStack> <RangeSlider isReadOnly /> <FormControl isReadOnly label="volume (sound)" helperMessage="Please select your preferred volume." > <RangeSlider /> </FormControl> </VStack>
Make Input Invalid
To make input invalid, set isInvalid
to true
.
Editable example
const [value, onChange] = useState<[number, number]>([15, 45]) return ( <VStack> <RangeSlider isInvalid={value[0] < 20} value={value} onChange={onChange} /> <FormControl isInvalid={value[0] < 20} label="volume (sound)" errorMessage="Min volume should be set to 20 or higher." > <RangeSlider value={value} onChange={onChange} /> </FormControl> </> )
Display Marks
To display marks, use RangeSliderMark
.
Editable example
<VStack gap="lg" my="10"> <RangeSlider size="sm"> <RangeSliderMark value={25} w="10" ml="-5"> 25% </RangeSliderMark> <RangeSliderMark value={50} w="10" ml="-5"> 50% </RangeSliderMark> <RangeSliderMark value={75} w="10" ml="-5"> 75% </RangeSliderMark> </RangeSlider> <RangeSlider size="md"> <RangeSliderMark value={25} w="10" ml="-5"> 25% </RangeSliderMark> <RangeSliderMark value={50} w="10" ml="-5"> 50% </RangeSliderMark> <RangeSliderMark value={75} w="10" ml="-5"> 75% </RangeSliderMark> </RangeSlider> <RangeSlider size="lg"> <RangeSliderMark value={25} w="10" ml="-5"> 25% </RangeSliderMark> <RangeSliderMark value={50} w="10" ml="-5"> 50% </RangeSliderMark> <RangeSliderMark value={75} w="10" ml="-5"> 75% </RangeSliderMark> </RangeSlider> </VStack>
Display Tooltips
To display tooltips, wrap RangeSliderStartThumb
and RangeSliderEndThumb
with Tooltip
.
Editable example
const [value, onChange] = useState<[number, number]>([25, 75]) const [isOpen, { on, off }] = useBoolean(false) return ( <RangeSlider value={value} onChange={onChange} my="10" onMouseEnter={on} onMouseLeave={off} > {" "} <RangeSliderMark value={25} w="10" ml="-5"> 25% </RangeSliderMark> <RangeSliderMark value={50} w="10" ml="-5"> 50% </RangeSliderMark> <RangeSliderMark value={75} w="10" ml="-5"> 75% </RangeSliderMark> <Tooltip placement="top" label={`${value[0]}%`} isOpen={isOpen}> <RangeSliderStartThumb /> </Tooltip> <Tooltip placement="top" label={`${value[1]}%`} isOpen={isOpen}> <RangeSliderEndThumb /> </Tooltip> </RangeSlider> )
Customize Styling
Editable example
<VStack> <RangeSlider trackColor="orange.200" filledTrackColor="orange.500" thumbColor="orange.700" /> <RangeSlider trackProps={{ bg: "green.200" }} filledTrackProps={{ bg: "green.500" }} thumbProps={{ bg: "green.700" }} /> <RangeSlider> <RangeSliderTrack bg="blue.200" filledTrackProps={{ bg: "blue.500" }} /> <RangeSliderStartThumb bg="blue.700" /> <RangeSliderEndThumb bg="blue.700" /> </RangeSlider> <RangeSlider> <RangeSliderTrack bg="red.200"> <RangeSliderFilledTrack bg="red.500" /> </RangeSliderTrack> <RangeSliderStartThumb bg="red.700" /> <RangeSliderEndThumb bg="red.700" /> </RangeSlider> </VStack>
Editable example
<VStack> <RangeSlider thumbProps={{ color: "blue.500", boxSize: "6", children: <Activity />, }} /> <RangeSlider> <RangeSliderStartThumb color="blue.500" boxSize="6"> <Activity /> </RangeSliderStartThumb> <RangeSliderEndThumb color="blue.500" boxSize="6"> <Activity /> </RangeSliderEndThumb> </RangeSlider> </VStack>
Editable example
const [value, onChange] = useState<[number, number]>([25, 75]) return ( <VStack> <RangeSlider value={value} onChange={onChange} my="10"> <RangeSliderMark value={25} w="10" ml="-5"> 25% </RangeSliderMark> <RangeSliderMark value={50} w="10" ml="-5"> 50% </RangeSliderMark> <RangeSliderMark value={75} w="10" ml="-5"> 75% </RangeSliderMark> <RangeSliderMark value={value[0]} bg="blue.500" color="white" py="0.5" rounded="md" w="10" mt="-10" ml="-5" > {value[0]}% </RangeSliderMark> <RangeSliderMark value={value[1]} bg="blue.500" color="white" py="0.5" rounded="md" w="10" mt="-10" ml="-5" > {value[1]}% </RangeSliderMark> </RangeSlider> </VStack> )
Handle Events for Start and End of Changes
To handle events for the start and end of changes, use onChangeStart
and onChangeEnd
.
Editable example
const [value, onChange] = useState<[number, number]>([25, 75]) const [startValue, onChangeStart] = useState<[number, number]>([25, 75]) const [endValue, onChangeEnd] = useState<[number, number]>([25, 75]) return ( <VStack> <Text> Min: {value[0]}, Max: {value[1]} </Text> <Text> Start Min: {startValue[0]}, Start Max: {startValue[0]} </Text> <Text> End Min: {endValue[0]}, End Max: {endValue[0]} </Text> <RangeSlider value={value} onChange={onChange} onChangeStart={onChangeStart} onChangeEnd={onChangeEnd} /> </VStack> )
Use React Hook Form
Editable example
type Data = { rangeSlider: [number, number] } const defaultValues: Data = { rangeSlider: [25, 75], } const { control, handleSubmit, watch, formState: { errors }, } = useForm<Data>({ defaultValues }) const onSubmit: SubmitHandler<Data> = (data) => console.log("submit:", data) console.log("watch:", watch()) return ( <VStack as="form" onSubmit={handleSubmit(onSubmit)}> <FormControl isInvalid={!!errors.rangeSlider} label="Volume" errorMessage={errors.rangeSlider ? errors.rangeSlider.message : undefined} > <Controller name="rangeSlider" control={control} render={({ field }) => <RangeSlider {...field} />} /> </FormControl> <Button type="submit" alignSelf="flex-end"> Submit </Button> </VStack> )
Edit this page on GitHub