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"` The size of the component.
`variant`	-	`[{ _peerAccept?: [... & { base?: [... & ..., ... & ...] \| (... & ...) \| undefined; "2xl"?: [... & ..., ... & ...] \| (... & ...) \| undefined; lg?: [...] \| ... 1 more ... \| undefined; md?: [...] \| ... 1 more ... \| undefined; sm?: [...] \| ... 1 more ... \| undefined; xl?: [...] \| ... 1 more ... \| undefined; }, ... & { ....` 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" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" \| "amber.400" \| "amber.50" \| "amber.500" ...` 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.
`orientation`	`"horizontal"`	`"horizontal" \| "vertical"` The orientation of the slider.
`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.
`shape`	`"circle"`	`"circle" \| "rounded" \| "square"` The shape of the thumb.
`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" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" \| "amber.400" \| "amber.50" \| "amber.500" ...` 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

Currently, this section is being updated due to the migration of v2.