AlphaSlider

AlphaSliderは、ユーザーが色の透明度を選択するために使用されるコンポーネントです。

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

使い方

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

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

import { AlphaSlider } from "@workspaces/ui"

<AlphaSlider.Root />

サイズを変更する

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

デフォルトの値を設定する

デフォルトの値を設定する場合は、defaultValueに値を設定します。

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

最小・最大値を設定する

最小・最大値を設定する場合は、minまたはmaxに数値を設定します。

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

方向を変更する

方向を変更する場合は、orientationに"vertical"または"horizontal"を設定します。デフォルトは、"vertical"が設定されています。

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

形を変更する

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

ステップ値を設定する

ステップ値を設定する場合は、stepに値を設定します。

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

無効にする

無効にする場合は、disabledをtrueに設定します。

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

読み取り専用にする

読み取り専用にする場合は、readOnlyを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>
)

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。

開始と終了のイベントをハンドルする

開始と終了のイベントをハンドルする場合は、onChangeStartや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>
)

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。

制御する

const [value, setValue] = useState(0.5)

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

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。

Props

AlphaSlider.Root

Prop	デフォルト	型 / 説明
`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" \| "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	デフォルト	型 / 説明
`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	デフォルト	型 / 説明
`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	デフォルト	型 / 説明
`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.

アクセシビリティ

現在、v2の移行に伴い、このセクションは更新中です。