Slider
Sliderは、ユーザーが値の範囲から選択するために使用されるコンポーネントです。
インポート
import {Slider,SliderTrack,SliderFilledTrack,SliderThumb,SliderMark,} from "@yamada-ui/react"
Slider: 子要素(SliderTrack,SliderThumb)を制御するラッパーコンポーネントです。SliderTrack: トラックを表示するラッパーコンポーネントです。SliderFilledTrack: 塗りつぶされたトラックを表示するコンポーネントです。SliderThumbスライダーの値を変更するために使用されるアイコンのコンポーネントです。SliderMark特定の値にラベルまたはマークとして表示するコンポーネントです。
SliderTrack, SliderFilledTrackとSliderThumbは、省略することができます。
使い方
編集可能な例
<Slider />
サイズを変更する
編集可能な例
<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>
カラースキームを変更する
編集可能な例
<VStack> <For each={["secondary", "green"]}> {(colorScheme, index) => <Slider key={index} colorScheme={colorScheme} />} </For> </VStack>
デフォルトの値を設定する
デフォルトの値を設定する場合は、defaultValueに数値を設定します。
編集可能な例
<Slider defaultValue={50} />
方向を変更する
方向を変更する場合は、orientationにverticalまたはhorizontalを設定します。デフォルトでは、horizontalが設定されています。
編集可能な例
<Slider orientation="vertical" h="sm" />
逆方向にする
逆方向にする場合は、isReversedをtrueに設定します。
編集可能な例
<Slider isReversed />
最小値と最大値を設定する
最小値と最大値を設定する場合は、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> )
ステップ値を設定する
ステップ値を設定する場合は、stepに数値を設定します。
編集可能な例
const [value, onChange] = useState<number>(50) return ( <VStack> <Text>Value: {value}</Text> <Slider value={value} step={10} onChange={onChange} /> </VStack> )
外部からの制御のみにする
外部からの制御のみにする場合は、focusThumbOnChangeをfalseにします。
編集可能な例
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> </> )
無効化する
無効化する場合は、isDisabledをtrueに設定します。
編集可能な例
<VStack> <Slider isDisabled /> <Fieldset isDisabled legend="Sound volume" helperMessage="Please select your preferred volume." > <Slider /> </Fieldset> </VStack>
読み取り専用にする
読み取り専用にする場合は、isReadOnlyをtrueに設定します。
編集可能な例
<VStack> <Slider isReadOnly /> <Fieldset isReadOnly legend="Sound volume" helperMessage="Please select your preferred volume." > <Slider /> </Fieldset> </VStack>
無効な入力にする
無効な入力にする場合は、isInvalidをtrueに設定します。
編集可能な例
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> </> )
マークを表示する
マークを表示する場合は、SliderMarkを使用します。
編集可能な例
<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>
ツールチップを表示する
ツールチップを表示する場合は、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} > <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> )
スタイリングをカスタマイズする
編集可能な例
<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>
編集可能な例
<VStack> <Slider thumbProps={{ color: "blue.500", boxSize: "6", children: <ActivityIcon />, }} /> <Slider> <SliderThumb color="blue.500" boxSize="6"> <ActivityIcon /> </SliderThumb> </Slider> </VStack>
編集可能な例
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> )
変更の開始と終了のイベントをハンドルをする
変更の開始と終了のイベントをハンドルをする場合は、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> )
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)}> <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> )
GitHubでこのページを編集する