Leave Yamada UI a star

Star
Yamada UIYamada UIv1.7.2

AlphaSlider

AlphaSlider is a component used to allow the user to select color transparency.

Source@yamada-ui/color-picker

Import

import { AlphaSlider } from "@yamada-ui/react"
Copied!

Usage

Editable example

<AlphaSlider />
Copied!

Change Size

Editable example

<VStack>
  <For
    each={[
      {
        color: "#4387f4",
        size: "sm",
        defaultValue: 0.3,
      },
      {
        color: "#895af6",
        size: "md",
        defaultValue: 0.6,
      },
      {
        color: "#3cc360",
        size: "lg",
        defaultValue: 0.9,
      },
    ]}
  >
    {({ color, size, defaultValue }, index) => (
      <AlphaSlider
        key={index}
        color={color}
        size={size}
        defaultValue={defaultValue}
      />
    )}
  </For>
</VStack>
Copied!

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>
)
Copied!

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>
)
Copied!

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>
)
Copied!

Disable

To disable, set isDisabled to true.

Editable example

<VStack>
  <AlphaSlider color="#4387f4" isDisabled />

  <Fieldset
    isDisabled
    legend="Pick color"
    helperMessage="Please select your favorite color"
  >
    <AlphaSlider color="#4387f4" />
  </Fieldset>
</VStack>
Copied!

Make Read-Only

To make read-only, set isReadOnly to true.

Editable example

<VStack>
  <AlphaSlider color="#4387f4" isReadOnly />

  <Fieldset
    isReadOnly
    legend="Pick color"
    helperMessage="Please select your favorite color"
  >
    <AlphaSlider color="#4387f4" />
  </Fieldset>
</VStack>
Copied!

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>
)
Copied!

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)}>
    <Fieldset
      isInvalid={!!errors.alphaSlider}
      legend="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} />}
      />
    </Fieldset>

    <Button type="submit" alignSelf="flex-end">
      Submit
    </Button>
  </VStack>
)
Copied!

Edit this page on GitHub

PreviousHueSliderNextSaturationSlider