HueSlider
HueSlider
is a component used to allow the user to select a color hue.
Import
import { HueSlider } from "@yamada-ui/react"
Usage
Editable example
<HueSlider />
Change Size
Editable example
<VStack> <For each={[ { size: "sm", defaultValue: 120, }, { size: "md", defaultValue: 180, }, { size: "lg", defaultValue: 240, }, ]} > {({ size, defaultValue }, index) => ( <HueSlider key={index} size={size} defaultValue={defaultValue} /> )} </For> </VStack>
Set Minimum and Maximum Values
To set minimum and maximum values, assign a number to min
or max
. By default, min
is set to 0
and max
is set to 360
.
Editable example
const [value, onChange] = useState<number>(140) return ( <VStack> <Text>Value: {value}</Text> <HueSlider value={value} min={120} max={180} onChange={onChange} /> </VStack> )
Set Step Value
To set a step value, assign a number to step
.
Editable example
const [value, onChange] = useState<number>(180) return ( <VStack> <Text>Value: {value}</Text> <HueSlider color="#4387f4" value={value} step={10} onChange={onChange} /> </VStack> )
Control Externally Only
To control externally only, set focusThumbOnChange
to false
.
Editable example
const [value, setValue] = useState<number>(180) return ( <VStack> <Text>Value: {value}</Text> <HueSlider 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 === 360} colorScheme="blue" onClick={() => setValue((prev) => (prev !== 360 ? prev + 10 : prev))} > +10 </Button> </Center> </VStack> )
Disable
To disable, set isDisabled
to true
.
Editable example
<VStack> <HueSlider isDisabled /> <Fieldset isDisabled legend="Pick color" helperMessage="Please select your favorite color" > <HueSlider /> </Fieldset> </VStack>
Make Read-Only
To make read-only, set isReadOnly
to true
.
Editable example
<VStack> <HueSlider isReadOnly /> <Fieldset isReadOnly legend="Pick color" helperMessage="Please select your favorite color" > <HueSlider /> </Fieldset> </VStack>
Handle Start and End Change Events
To handle start and end change events, use onChangeStart
and onChangeEnd
.
Editable example
const [value, onChange] = useState<number>(180) const [startValue, onChangeStart] = useState<number>(180) const [endValue, onChangeEnd] = useState<number>(180) return ( <VStack> <Text> Value: {value}, Start Value: {startValue}, End Value: {endValue} </Text> <HueSlider value={value} onChange={onChange} onChangeStart={onChangeStart} onChangeEnd={onChangeEnd} /> </VStack> )
Use React Hook Form
Editable example
type Data = { hueSlider: number } const defaultValues: Data = { hueSlider: 180, } 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.hueSlider} legend="Pick color" errorMessage={errors.hueSlider ? errors.hueSlider.message : undefined} > <Controller name="hueSlider" control={control} rules={{ max: { value: 180, message: "The maximum value is 180." } }} render={({ field }) => <HueSlider {...field} />} /> </Fieldset> <Button type="submit" alignSelf="flex-end"> Submit </Button> </VStack> )
Edit this page on GitHub