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