Leave Yamada UI a star

Star
Yamada UIYamada UIv1.5.0

RangeSlider

RangeSlider is a component used for users to select a range of related values.

Source@yamada-ui/slider

Import

import {
  RangeSlider,
  RangeSliderTrack,
  RangeSliderFilledTrack,
  RangeSliderStartThumb,
  RangeSliderEndThumb,
  RangeSliderMark,
} from "@yamada-ui/react"
Copied!
  • 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.

Usage

Editable example

<RangeSlider />
Copied!

Change Size

Editable example

<VStack>
  <RangeSlider size="sm" defaultValue={[0, 25]} />
  <RangeSlider size="md" defaultValue={[25, 50]} />
  <RangeSlider size="lg" defaultValue={[50, 75]} />
</VStack>
Copied!

Change Color Scheme

Editable example

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

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]} />
Copied!

Change Orientation

To change the orientation, set orientation to vertical or horizontal. By default, horizontal is set.

Editable example

<RangeSlider orientation="vertical" h="sm" />
Copied!

Reverse Direction

To reverse the direction, set isReversed to true.

Editable example

<RangeSlider isReversed />
Copied!

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

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

Set Minimum Range Between Values

To set the minimum range between values, set a number to betweenThumbs.

Editable example

<RangeSlider betweenThumbs={10} />
Copied!

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

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

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

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

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

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

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

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

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

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

Edit this page on GitHub

PreviousRangeDatePickerNextRating