AlphaSlider

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

<AlphaSlider.Root color="#775999" defaultValue={0.5} />

Usage

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

import { AlphaSlider } from "@/components/ui"

import { AlphaSlider } from "@workspaces/ui"

<AlphaSlider.Root />

Change Size

<VStack>
  <For each={["sm", "md", "lg"]}>
    {(size, index) => (
      <AlphaSlider.Root
        key={index}
        size={size}
        color="#775999"
        defaultValue={0.5}
      />
    )}
  </For>
</VStack>

Set Default Value

To set a default value, set a value to defaultValue.

<AlphaSlider.Root color="#775999" defaultValue={0.7} />

Set Minimum and Maximum Values

To set minimum and maximum values, set numbers to min or max.

<AlphaSlider.Root color="#775999" defaultValue={0.5} min={0.25} max={0.75} />

Change Orientation

To change the orientation, set orientation to "vertical" or "horizontal". The default is "vertical".

<AlphaSlider.Root
  color="#775999"
  defaultValue={0.5}
  orientation="vertical"
  h="xs"
/>

Change Shape

<VStack>
  <For each={["circle", "rounded", "square"]}>
    {(shape, index) => (
      <AlphaSlider.Root
        key={index}
        color="#775999"
        defaultValue={0.5}
        shape={shape}
      />
    )}
  </For>
</VStack>

Set Step Value

To set the step value, set a value to step.

<AlphaSlider.Root color="#775999" defaultValue={0.5} step={0.1} />

Disable

To disable, set disabled to true.

<AlphaSlider.Root color="#775999" defaultValue={0.5} disabled />

Read-Only

To make read-only, set readOnly to true.

<AlphaSlider.Root color="#775999" defaultValue={0.5} readOnly />

const [value, setValue] = useState(0.5)

return (
  <AlphaSlider.Root color="#775999" value={value} onChange={setValue}>
    <AlphaSlider.Track>
      <Tooltip content={value}>
        <AlphaSlider.Thumb />
      </Tooltip>

      <AlphaSlider.Overlay />
    </AlphaSlider.Track>
  </AlphaSlider.Root>
)

If you use this code, you need to add "use client" to the top of the file.

Handle Start and End Change Events

To handle start and end change events, use onChangeStart and onChangeEnd.

Value: 0.5, Start Value: 0.5, End Value: 0.5

const [value, onChange] = useState(0.5)
const [startValue, onChangeStart] = useState(0.5)
const [endValue, onChangeEnd] = useState(0.5)

return (
  <VStack>
    <Text>
      Value: {value}, Start Value: {startValue}, End Value: {endValue}
    </Text>

    <AlphaSlider.Root
      color="#775999"
      value={value}
      onChange={onChange}
      onChangeStart={onChangeStart}
      onChangeEnd={onChangeEnd}
    />
  </VStack>
)

If you use this code, you need to add "use client" to the top of the file.

Control

const [value, setValue] = useState(0.5)

return <AlphaSlider.Root color="#775999" value={value} onChange={setValue} />

If you use this code, you need to add "use client" to the top of the file.

Props

AlphaSlider.Root

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`size`	-	`"lg" \| "md" \| "sm" \| "xl" \| "xs"` The size of the component.
`variant`	-	`"outline" \| "solid"` The variant of the component.
`color`	-	`string` The color used for the slider.
`defaultValue`	-	`number` The initial value of the slider.
`disabled`	`false`	`boolean` If `true`, the field will be disabled.
`getAriaValueText`	-	`(value: number, index: number) => string \| undefined` This is used to format the value so that screen readers can speak out a more human-friendly value. It is used to set the `aria-valuetext` property of the input.
`indicatorFill`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The fill color of the indicator.
`indicatorRounded`	-	`"-moz-initial" \| "2xl" \| "2xs" \| "3xl" \| "4xl" \| "full" \| "inherit" \| "initial" \| "l1" \| "l2" ...` The rounded of the indicator.
`inputProps`	-	`SliderInputProps` Props for the input element.
`invalid`	`false`	`boolean` If `true`, the field will be invalid.
`max`	`1`	`number` The maximum allowed value of the slider. Cannot be less than min.
`min`	`0`	`number` The minimum allowed value of the slider. Cannot be greater than max.
`name`	-	`string` The name attribute of the hidden `input` field. This is particularly useful in forms.
`onChange`	-	`(value: number) => void` Function called whenever the slider value changes.
`onChangeEnd`	-	`(value: number) => void` Function called when the user is done selecting a new value.
`onChangeStart`	-	`(value: number) => void` Function called when the user starts selecting a new value.
`overlayProps`	-	`AlphaSliderOverlayProps` Props for the overlay element.
`readOnly`	`false`	`boolean` If `true`, the field will be readonly.
`required`	`false`	`boolean` If `true`, the field will be required.
`step`	`0.01`	`number` The step in which increments or decrements have to be made.
`thumbProps`	-	`AlphaSliderThumbProps` Props for the thumb element.
`thumbRounded`	-	`"-moz-initial" \| "2xl" \| "2xs" \| "3xl" \| "4xl" \| "full" \| "inherit" \| "initial" \| "l1" \| "l2" ...` The rounded of the thumb.
`thumbSize`	-	`"-moz-fit-content" \| "-moz-initial" \| "-moz-max-content" \| "-moz-min-content" \| "-webkit-fit-content" \| "-webkit-max-content" \| "0.5" \| "1.5" \| "1" \| "1/12" ...` The size of the thumb.
`thumbStroke`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The stroke color of the thumb.
`trackProps`	-	`AlphaSliderTrackProps` Props for the track element.
`trackRounded`	-	`"-moz-initial" \| "2xl" \| "2xs" \| "3xl" \| "4xl" \| "full" \| "inherit" \| "initial" \| "l1" \| "l2" ...` The rounded of the track.
`trackSize`	-	`"-moz-fit-content" \| "-moz-initial" \| "-moz-max-content" \| "-moz-min-content" \| "-webkit-fit-content" \| "-webkit-max-content" \| "0.5" \| "1.5" \| "1" \| "1/12" ...` The size of the track.
`value`	-	`number` The value of the slider.

AlphaSlider.Overlay

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`layers`	-	`HTMLStyledProps[]` The layers used for the overlay element.

AlphaSlider.Thumb

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`index`	-	`number` The index of the thumb.

AlphaSlider.Track

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

Accessibility

The AlphaSlider follows the WAI-ARIA - Slider Pattern for accessibility.

Key	Description	State
`ArrowRight`	Increases the value based on the `step` value.	-
`ArrowLeft`	Decreases the value based on the `step` value.	-
`ArrowUp`	Increases the value based on the `step` value.	-
`ArrowDown`	Decreases the value based on the `step` value.	-
`Home`	Sets the value to `min`.	-
`End`	Sets the value to `max`.	-
`PageUp`	Increases the value based on the `min` and `max` values.	-
`PageDown`	Decreases the value based on the `min` and `max` values.	-

ARIA Roles and Attributes

Component and Element	Roles and Attributes	Usage
`AlphaSlider.Thumb`	`role="slider"`	Indicates that this is a slider.
	`aria-label`	Sets `"Slider thumb"`.
	`aria-orientation`	Sets `"horizontal"` or `"vertical"` based on the `orientation` value. Default is `"horizontal"`.
	`aria-valuemin`	Sets the `min` value. Default is `0`.
	`aria-valuemax`	Sets the `max` value. Default is `1`.
	`aria-valuenow`	Sets the current value.
	`aria-valuetext`	Sets the current value, such as `"18%"`.
	`aria-describedby`	If this is within a `Field.Root` and `Field.Root` has an `errorMessage`, `helperMessage`, or a `Field.ErrorMessage`, `Field.HelperMessage`, sets its `id`.
	`aria-readonly`	Set to `"true"` if `readOnly` is set.
	`aria-disabled`	Set to `"true"` if `disabled` is set.
	`aria-invalid`	Set to `"true"` if `invalid` is set.
	`aria-required`	Set to `"true"` if `required` is set.
`input`	`aria-hidden`	Excludes the element from the accessibility tree.
	`aria-describedby`	If this is within a `Field.Root` and `Field.Root` has an `errorMessage`, `helperMessage`, or a `Field.ErrorMessage`, `Field.HelperMessage`, sets its `id`.
	`aria-readonly`	Set to `"true"` if `readOnly` is set.
	`aria-disabled`	Set to `"true"` if `disabled` is set.
	`aria-invalid`	Set to `"true"` if `invalid` is set.
	`aria-required`	Set to `"true"` if `required` is set.

Similar Components

HueSlider is a component used to allow the user to select a color hue.

SaturationSlider is a component used to allow the user to select a color saturation.

ColorSelector is a component used by the user to select a color.

Slider is a component used for allowing users to select a value from a range.

ColorPicker is a component used by the user to select a color or enter an arbitrary color value.

Uses Components & Hooks

ColorSwatch is a component that displays color samples.

HueSlider is a component used to allow the user to select a color hue.

useValue is a custom hook that combines useBreakpointValue and useColorModeValue.

Used By Components & Hooks

ColorSelector is a component used by the user to select a color.

AlphaSlider

Usage

Change Size

Set Default Value

Set Minimum and Maximum Values

Change Orientation

Change Shape

Set Step Value

Disable

Read-Only

Display Tooltip

Handle Start and End Change Events

Control

Props

AlphaSlider.Root

AlphaSlider.Overlay

AlphaSlider.Thumb

AlphaSlider.Track

Accessibility

Keyboard Navigation

ARIA Roles and Attributes

Similar Components

HueSlider

SaturationSlider

ColorSelector

Slider

ColorPicker

Uses Components & Hooks

ColorSwatch

HueSlider

useValue

Used By Components & Hooks

ColorSelector

AlphaSlider.Root

AlphaSlider.Overlay

AlphaSlider.Thumb

AlphaSlider.Track