SaturationSlider
SaturationSlider
is a component used to allow the user to select a color saturation.
Import
import { SaturationSlider } from "@yamada-ui/react"
Usage
Editable example
<SaturationSlider />
Change Size
Editable example
<VStack> <SaturationSlider size="sm" defaultValue={[120, 0.33, 0.33]} /> <SaturationSlider size="md" defaultValue={[180, 0.66, 0.66]} /> <SaturationSlider size="lg" defaultValue={[240, 1, 1]} /> </VStack>
Set Step Value
To set a step value, assign a number to step
.
Editable example
const [value, onChange] = useState<Hsv>([180, 1, 1]) return ( <VStack> <Text>Value: {JSON.stringify(value)}</Text> <SaturationSlider value={value} step={0.1} onChange={onChange} /> </VStack> )
Control Externally Only
To control externally only, set focusThumbOnChange
to false
.
Editable example
const [value, setValue] = useState<Hsv>([180, 1, 1]) const [, s, v] = value const onChange = (space: "s" | "v", type: "increment" | "decrement") => { const i = space === "s" ? 1 : 2 setValue((prev) => { if (type === "increment") { if (prev[i] !== 1) prev[i] = Math.round((prev[i] + 0.1) * 10) / 10 } else { if (prev[i] !== 0) prev[i] = Math.round((prev[i] - 0.1) * 10) / 10 } return [...prev] }) } return ( <VStack> <Text>Value: {JSON.stringify(value)}</Text> <SaturationSlider value={value} step={10} focusThumbOnChange={false} /> <Wrap gap="md"> <VStack w="auto" gap="sm"> <Text>Saturation</Text> <Wrap gap="md"> <Button isDisabled={s === 0} onClick={() => onChange("s", "decrement")} > -0.1 </Button> <Button isDisabled={s === 1} colorScheme="blue" onClick={() => onChange("s", "increment")} > +0.1 </Button> </Wrap> </VStack> <VStack w="auto" gap="sm"> <Text>Brightness</Text> <Wrap gap="md"> <Button isDisabled={v === 0} onClick={() => onChange("v", "decrement")} > -0.1 </Button> <Button isDisabled={v === 1} colorScheme="blue" onClick={() => onChange("v", "increment")} > +0.1 </Button> </Wrap> </VStack> </Wrap> </VStack> )
Disable
To disable, set isDisabled
to true
.
Editable example
<VStack> <SaturationSlider isDisabled /> <FormControl isDisabled label="Pick color" helperMessage="Please select your favorite color" > <SaturationSlider /> </FormControl> </VStack>
Make Read-Only
To make read-only, set isReadOnly
to true
.
Editable example
<VStack> <SaturationSlider isReadOnly /> <FormControl isReadOnly label="Pick color" helperMessage="Please select your favorite color" > <SaturationSlider /> </FormControl> </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, 1, 1]) const [startValue, onChangeStart] = useState<number>([180, 1, 1]) const [endValue, onChangeEnd] = useState<number>([180, 1, 1]) return ( <VStack> <Text> Value: {JSON.stringify(value)}, Start Value: {JSON.stringify(startValue)}, End Value: {JSON.stringify(endValue)} </Text> <SaturationSlider value={value} onChange={onChange} onChangeStart={onChangeStart} onChangeEnd={onChangeEnd} /> </VStack> )
Use React Hook Form
Editable example
type Data = { saturationSlider: Hsv } const defaultValues: Data = { saturationSlider: [180, 1, 1], } 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.saturationSlider} label="Pick color" errorMessage={ errors.saturationSlider ? errors.saturationSlider.message : undefined } > <Controller name="saturationSlider" control={control} render={({ field }) => <SaturationSlider {...field} />} /> </FormControl> <Button type="submit" alignSelf="flex-end"> Submit </Button> </VStack> )
Edit this page on GitHub