Yamada UIにスターをあげる

スター
Yamada UIYamada UIv1.6.3

Slider

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

ソース@yamada-ui/slider

インポート

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

使い方

編集可能な例

<Slider />
Copied!

サイズを変更する

編集可能な例

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

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

編集可能な例

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

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

デフォルトの値を設定する場合は、defaultValueに数値を設定します。

編集可能な例

<Slider defaultValue={50} />
Copied!

方向を変更する

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

編集可能な例

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

逆方向にする

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

編集可能な例

<Slider isReversed />
Copied!

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

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

編集可能な例

const [value, onChange] = useState<number>(50)

return (
  <VStack>
    <Text>Value: {value}</Text>

    <Slider value={value} min={0} max={200} onChange={onChange} />
  </VStack>
)
Copied!

ステップ値を設定する

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

編集可能な例

const [value, onChange] = useState<number>(50)

return (
  <VStack>
    <Text>Value: {value}</Text>

    <Slider value={value} step={10} onChange={onChange} />
  </VStack>
)
Copied!

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

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

編集可能な例

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!

無効化する

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

編集可能な例

<VStack>
  <Slider isDisabled />

  <FormControl
    isDisabled
    label="Sound volume"
    helperMessage="Please select your preferred volume."
  >
    <Slider />
  </FormControl>
</VStack>
Copied!

読み取り専用にする

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

編集可能な例

<VStack>
  <Slider isReadOnly />

  <FormControl
    isReadOnly
    label="Sound volume"
    helperMessage="Please select your preferred volume."
  >
    <Slider />
  </FormControl>
</VStack>
Copied!

無効な入力にする

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

編集可能な例

const [value, onChange] = useState<number>(15)

return (
  <VStack>
    <Slider isInvalid={value < 20} value={value} onChange={onChange} />

    <FormControl
      isInvalid={value < 20}
      label="Sound volume"
      errorMessage="Volume should be set to 20 or higher."
    >
      <Slider value={value} onChange={onChange} />
    </FormControl>
  </>
)
Copied!

マークを表示する

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

編集可能な例

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

ツールチップを表示する

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

編集可能な例

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!

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

編集可能な例

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

編集可能な例

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

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

編集可能な例

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!

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

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

編集可能な例

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!

React Hook Formを使う

編集可能な例

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!

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

前Dropzone次RangeSlider