AlphaSlider
AlphaSlider
is a component used to allow the user to select color transparency.
Import
import { AlphaSlider } from "@yamada-ui/react"
Usage
Editable example
<AlphaSlider />
Change Size
Editable example
<VStack> <AlphaSlider color="#4387f4" size="sm" defaultValue={0.3} /> <AlphaSlider color="#895af6" size="md" defaultValue={0.6} /> <AlphaSlider color="#3cc360" size="lg" defaultValue={0.9} /> </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 1
.
Editable example
const [value, onChange] = useState<number>(0.5) return ( <VStack> <Text>Value: {value}</Text> <AlphaSlider color="#4387f4" value={value} min={0.3} max={0.8} onChange={onChange} /> </VStack> )
Set Step Value
To set a step value, assign a number to step
.
Editable example
const [value, onChange] = useState<number>(0.5) return ( <VStack> <Text>Value: {value}</Text> <AlphaSlider color="#4387f4" 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<number>(0.5) return ( <VStack> <Text>Value: {value}</Text> <AlphaSlider color="#4387f4" value={value} step={0.1} focusThumbOnChange={false} /> <Center w="full" gap="md"> <Button isDisabled={value === 0} onClick={() => setValue((prev) => prev !== 0 ? Math.round((prev - 0.1) * 10) / 10 : prev, ) } > -0.1 </Button> <Button isDisabled={value === 1} colorScheme="blue" onClick={() => setValue((prev) => prev !== 1 ? Math.round((prev + 0.1) * 10) / 10 : prev, ) } > +0.1 </Button> </Center> </VStack> )
Disable
To disable, set isDisabled
to true
.
Editable example
<VStack> <AlphaSlider color="#4387f4" isDisabled /> <FormControl isDisabled label="Pick color" helperMessage="Please select your favorite color" > <AlphaSlider color="#4387f4" /> </FormControl> </VStack>
Make Read-Only
To make read-only, set isReadOnly
to true
.
Editable example
<VStack> <AlphaSlider color="#4387f4" isReadOnly /> <FormControl isReadOnly label="Pick color" helperMessage="Please select your favorite color" > <AlphaSlider color="#4387f4" /> </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>(0.5) const [startValue, onChangeStart] = useState<number>(0.5) const [endValue, onChangeEnd] = useState<number>(0.5) return ( <VStack> <Text> Value: {value}, Start Value: {startValue}, End Value: {endValue} </Text> <AlphaSlider color="#4387f4" value={value} onChange={onChange} onChangeStart={onChangeStart} onChangeEnd={onChangeEnd} /> </VStack> )
Use with React Hook Form
Editable example
type Data = { alphaSlider: number } const defaultValues: Data = { alphaSlider: 0.5, } 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.alphaSlider} label="Pick color" errorMessage={errors.alphaSlider ? errors.alphaSlider.message : undefined} > <Controller name="alphaSlider" control={control} rules={{ max: { value: 0.5, message: "The maximum value is 0.5." } }} render={({ field }) => <AlphaSlider {...field} />} /> </FormControl> <Button type="submit" alignSelf="flex-end"> Submit </Button> </VStack> )
Edit this page on GitHub