Yamada UIにスターをあげる

スター
Yamada UIYamada UIv1.6.3

RangeSlider

RangeSliderは、ユーザーが関連する値の範囲を選択するために使用されるコンポーネントです。

ソース@yamada-ui/slider

インポート

import {
  RangeSlider,
  RangeSliderTrack,
  RangeSliderFilledTrack,
  RangeSliderStartThumb,
  RangeSliderEndThumb,
  RangeSliderMark,
} from "@yamada-ui/react"
Copied!
  • RangeSlider: 子要素(RangeSliderTrack, RangeSliderStartThumb, RangeSliderEndThumb)を制御するラッパーコンポーネントです。
  • RangeSliderTrack: トラックを表示するラッパーコンポーネントです。
  • RangeSliderFilledTrack: 塗りつぶされたトラックを表示するコンポーネントです。
  • RangeSliderStartThumb スライダーの最小値を変更するために使用されるアイコンのコンポーネントです。
  • RangeSliderEndThumb スライダーの最大値を変更するために使用されるアイコンのコンポーネントです。
  • RangeSliderMark 特定の値にラベルまたはマークとして表示するコンポーネントです。

使い方

編集可能な例

<RangeSlider />
Copied!

サイズを変更する

編集可能な例

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

カラースキーマを変更する

編集可能な例

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

デフォルトの値を設定する

デフォルトの値を設定する場合は、defaultValueに[最初値, 最大値]を設定します。デフォルトでは、[25, 75]が設定されています。

編集可能な例

<RangeSlider defaultValue={[10, 90]} />
Copied!

方向を変更する

方向を変更する場合は、orientationにverticalまたはhorizontalを設定します。デフォルトでは、horizontalが設定されています。

編集可能な例

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

逆方向にする

逆方向にする場合は、isReversedをtrueに設定します。

編集可能な例

<RangeSlider isReversed />
Copied!

最小値と最大値を設定する

最小値と最大値を設定する場合は、minまたはmaxに数値を設定します。デフォルトでは、minは0、maxは100が設定されています。

編集可能な例

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!

ステップ値を設定する

ステップ値を設定する場合は、stepに数値を設定します。

編集可能な例

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!

値の最小範囲を設定する

値の最小範囲を設定する場合は、betweenThumbsに数値を設定します。

編集可能な例

<RangeSlider betweenThumbs={10} />
Copied!

外部からの制御のみにする

外部からの制御のみにする場合は、focusThumbOnChangeをfalseにします。

編集可能な例

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!

無効化する

無効化する場合は、isDisabledをtrueに設定します。

編集可能な例

<VStack>
  <RangeSlider isDisabled />

  <FormControl
    isDisabled
    label="volume (sound)"
    helperMessage="Please select your preferred volume."
  >
    <RangeSlider />
  </FormControl>
</VStack>
Copied!

読み取り専用にする

読み取り専用にする場合は、isReadOnlyをtrueに設定します。

編集可能な例

<VStack>
  <RangeSlider isReadOnly />

  <FormControl
    isReadOnly
    label="volume (sound)"
    helperMessage="Please select your preferred volume."
  >
    <RangeSlider />
  </FormControl>
</VStack>
Copied!

無効な入力にする

無効な入力にする場合は、isInvalidをtrueに設定します。

編集可能な例

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!

マークを表示する

マークを表示する場合は、RangeSliderMarkを使用します。

編集可能な例

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

ツールチップを表示する

ツールチップを表示する場合は、RangeSliderStartThumbとRangeSliderEndThumbをTooltipでラッピングします。

編集可能な例

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!

スタイリングをカスタマイズする

編集可能な例

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

編集可能な例

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

編集可能な例

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!

変更の開始と終了のイベントをハンドルをする

変更の開始と終了のイベントをハンドルをする場合は、onChangeStartやonChangeEndを使用します。

編集可能な例

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!

React Hook Formを使う

編集可能な例

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!

GitHubでこのページを編集する

前Slider次HueSlider