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> <For each={[ { size: "sm", defaultValue: 25, }, { size: "md", defaultValue: 50, }, { size: "lg", defaultValue: 75, }, ]} > {({ size, defaultValue }, index) => ( <Slider key={index} size={size} defaultValue={defaultValue} /> )} </For> </VStack>
Change Color Scheme
Editable example
<VStack> <For each={["secondary", "green"]}> {(colorScheme, index) => <Slider key={index} colorScheme={colorScheme} />} </For> </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} /> <ButtonGroup as={Center} gap="md" w="full"> <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> </ButtonGroup> </> )
Disable
To disable, set isDisabled to true.
Editable example
<VStack> <Slider isDisabled /> <Fieldset isDisabled legend="Sound volume" helperMessage="Please select your preferred volume." > <Slider /> </Fieldset> </VStack>
Make Read-Only
To make read-only, set isReadOnly to true.
Editable example
<VStack> <Slider isReadOnly /> <Fieldset isReadOnly legend="Sound volume" helperMessage="Please select your preferred volume." > <Slider /> </Fieldset> </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} /> <Fieldset isInvalid={value < 20} legend="Sound volume" errorMessage="Volume should be set to 20 or higher." > <Slider value={value} onChange={onChange} /> </Fieldset> </> )
Display Marks
To display marks, use SliderMark.
Editable example
<VStack gap="lg" my="10"> <For each={["sm", "md", "lg"]}> {(size, index) => ( <Slider key={index} size={size}> <For each={[25, 50, 75]}> {(value, index) => ( <SliderMark key={index} value={value} w="10" ml="-5"> {value}% </SliderMark> )} </For> </Slider> )} </For> </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} > <For each={[25, 50, 75]}> {(value, index) => ( <SliderMark key={index} value={value} w="10" ml="-5"> {value}% </SliderMark> )} </For> <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: <ActivityIcon />, }} /> <Slider> <SliderThumb color="blue.500" boxSize="6"> <ActivityIcon /> </SliderThumb> </Slider> </VStack>
Editable example
const [value, onChange] = useState<number>(50) return ( <Slider value={value} onChange={onChange} my="10"> <For each={[25, 50, 75]}> {(value, index) => ( <SliderMark key={index} value={value} w="10" ml="-5"> {value}% </SliderMark> )} </For> <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)}> <Fieldset isInvalid={!!errors.slider} legend="Sound 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} />} /> </Fieldset> <Button type="submit" alignSelf="flex-end"> Submit </Button> </VStack> )
Edit this page on GitHub