Leave Yamada UI a star

Star
Yamada UIYamada UIv1.5.0

Slider

Slider is a component used for allowing users to select a value from a range.

Source@yamada-ui/slider

Import

import {
  Slider,
  SliderTrack,
  SliderFilledTrack,
  SliderThumb,
  SliderMark,
} from "@yamada-ui/react"
Copied!
  • 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.

Usage

Editable example

<Slider />
Copied!

Change Size

Editable example

<VStack>
  <Slider size="sm" defaultValue={25} />
  <Slider size="md" defaultValue={50} />
  <Slider size="lg" defaultValue={75} />
</VStack>
Copied!

Change Color Scheme

Editable example

<VStack>
  <Slider colorScheme="secondary" />
  <Slider colorScheme="green" />
</VStack>
Copied!

Set Default Value

To set a default value, assign a number to defaultValue.

Editable example

<Slider defaultValue={50} />
Copied!

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" />
Copied!

Reverse Direction

To reverse the direction, set isReversed to true.

Editable example

<Slider isReversed />
Copied!

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>
)
Copied!

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>
)
Copied!

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>
  </>
)
Copied!

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>
Copied!

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>
Copied!

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>
  </>
)
Copied!

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>
Copied!

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>
)
Copied!

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>
Copied!

Editable example

<VStack>
  <Slider
    thumbProps={{
      color: "blue.500",
      boxSize: "6",
      children: <Activity />,
    }}
  />

  <Slider>
    <SliderThumb color="blue.500" boxSize="6">
      <Activity />
    </SliderThumb>
  </Slider>
</VStack>
Copied!

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>
)
Copied!

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>
)
Copied!

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>
)
Copied!

Edit this page on GitHub

PreviousSelectNextSwitch