RangeSlider
RangeSliderは、ユーザーが関連する値の範囲を選択するために使用されるコンポーネントです。
インポート
import {RangeSlider,RangeSliderTrack,RangeSliderFilledTrack,RangeSliderStartThumb,RangeSliderEndThumb,RangeSliderMark,} from "@yamada-ui/react"
RangeSlider: 子要素(RangeSliderTrack,RangeSliderStartThumb,RangeSliderEndThumb)を制御するラッパーコンポーネントです。RangeSliderTrack: トラックを表示するラッパーコンポーネントです。RangeSliderFilledTrack: 塗りつぶされたトラックを表示するコンポーネントです。RangeSliderStartThumbスライダーの最小値を変更するために使用されるアイコンのコンポーネントです。RangeSliderEndThumbスライダーの最大値を変更するために使用されるアイコンのコンポーネントです。RangeSliderMark特定の値にラベルまたはマークとして表示するコンポーネントです。
RangeSliderTrack, RangeSliderFilledTrack, RangeSliderStartThumbとRangeSliderEndThumbは、省略することができます。
使い方
編集可能な例
<RangeSlider />
サイズを変更する
編集可能な例
<VStack> <For each={[ { size: "sm", defaultValue: [0, 25], }, { size: "md", defaultValue: [25, 50], }, { size: "lg", defaultValue: [50, 75], }, ]} > {({ size, defaultValue }, index) => ( <RangeSlider key={index} size={size} defaultValue={defaultValue} /> )} </For> </VStack>
カラースキーマを変更する
編集可能な例
<VStack> <For each={["secondary", "green"]}> {(colorScheme, index) => ( <RangeSlider key={index} colorScheme={colorScheme} /> )} </For> </VStack>
デフォルトの値を設定する
デフォルトの値を設定する場合は、defaultValueに[最初値, 最大値]を設定します。デフォルトでは、[25, 75]が設定されています。
編集可能な例
<RangeSlider defaultValue={[10, 90]} />
方向を変更する
方向を変更する場合は、orientationにverticalまたはhorizontalを設定します。デフォルトでは、horizontalが設定されています。
編集可能な例
<RangeSlider orientation="vertical" h="sm" />
逆方向にする
逆方向にする場合は、isReversedをtrueに設定します。
編集可能な例
<RangeSlider isReversed />
最小値と最大値を設定する
最小値と最大値を設定する場合は、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> )
ステップ値を設定する
ステップ値を設定する場合は、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> )
値の最小範囲を設定する
値の最小範囲を設定する場合は、betweenThumbsに数値を設定します。
編集可能な例
<RangeSlider betweenThumbs={10} />
外部からの制御のみにする
外部からの制御のみにする場合は、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> )
無効化する
無効化する場合は、isDisabledをtrueに設定します。
編集可能な例
<VStack> <RangeSlider isDisabled /> <Fieldset isDisabled legend="Hotel Price Range" helperMessage="Please select your preferred price range." > <RangeSlider /> </Fieldset> </VStack>
読み取り専用にする
読み取り専用にする場合は、isReadOnlyをtrueに設定します。
編集可能な例
<VStack> <RangeSlider isReadOnly /> <Fieldset isReadOnly legend="Hotel Price Range" helperMessage="Please select your preferred price range." > <RangeSlider /> </Fieldset> </VStack>
無効な入力にする
無効な入力にする場合は、isInvalidをtrueに設定します。
編集可能な例
const [value, onChange] = useState<[number, number]>([15, 45]) return ( <VStack> <RangeSlider isInvalid={value[0] < 20} value={value} onChange={onChange} /> <Fieldset isInvalid={value[0] < 20} legend="Hotel Price Range" errorMessage="Minimum price should be set to 20 or higher." > <RangeSlider value={value} onChange={onChange} /> </Fieldset> </> )
マークを表示する
マークを表示する場合は、RangeSliderMarkを使用します。
編集可能な例
<VStack gap="lg" my="10"> <For each={["sm", "md", "lg"]}> {(size, index) => ( <RangeSlider key={index} size={size}> <For each={[25, 50, 75]}> {(value, index) => ( <RangeSliderMark key={index} value={value} w="10" ml="-5"> {value}% </RangeSliderMark> )} </For> </RangeSlider> )} </For> </VStack>
ツールチップを表示する
ツールチップを表示する場合は、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} > <For each={[25, 50, 75]}> {(value, index) => ( <RangeSliderMark key={value} value={value} w="10" ml="-5"> {value}% </RangeSliderMark> )} </For> <Tooltip placement="top" label={`${value[0]}%`} isOpen={isOpen}> <RangeSliderStartThumb /> </Tooltip> <Tooltip placement="top" label={`${value[1]}%`} isOpen={isOpen}> <RangeSliderEndThumb /> </Tooltip> </RangeSlider> )
スタイリングをカスタマイズする
編集可能な例
<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>
編集可能な例
<VStack> <RangeSlider thumbProps={{ color: "blue.500", boxSize: "6", children: <ActivityIcon />, }} /> <RangeSlider> <RangeSliderStartThumb color="blue.500" boxSize="6"> <ActivityIcon /> </RangeSliderStartThumb> <RangeSliderEndThumb color="blue.500" boxSize="6"> <ActivityIcon /> </RangeSliderEndThumb> </RangeSlider> </VStack>
編集可能な例
const [value, onChange] = useState<[number, number]>([25, 75]) return ( <VStack> <RangeSlider value={value} onChange={onChange} my="10"> <For each={[25, 50, 75]}> {(value, index) => ( <RangeSliderMark key={index} value={value} w="10" ml="-5"> {value}% </RangeSliderMark> )} </For> <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> )
変更の開始と終了のイベントをハンドルをする
変更の開始と終了のイベントをハンドルをする場合は、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> )
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)}> <Fieldset isInvalid={!!errors.rangeSlider} legend="Hotel Price Range" errorMessage={errors.rangeSlider ? errors.rangeSlider.message : undefined} > <Controller name="rangeSlider" control={control} render={({ field }) => <RangeSlider {...field} />} /> </Fieldset> <Button type="submit" alignSelf="flex-end"> Submit </Button> </VStack> )
GitHubでこのページを編集する