---
title: AlphaSlider
description: "`AlphaSlider`は、ユーザーが色の透明度を選択するために使用されるコンポーネントです。"
links:
- source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/alpha-slider
- storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-alphaslider--basic
---
```tsx
```
## 使い方
```tsx
import { AlphaSlider } from "@yamada-ui/react"
```
```tsx
import { AlphaSlider } from "@/components/ui"
```
```tsx
import { AlphaSlider } from "@workspaces/ui"
```
```tsx
```
### サイズを変更する
```tsx
{(size, index) => (
)}
```
### デフォルトの値を設定する
デフォルトの値を設定する場合は、`defaultValue`に値を設定します。
```tsx
```
### 最小・最大値を設定する
最小・最大値を設定する場合は、`min`または`max`に数値を設定します。
```tsx
```
### 方向を変更する
方向を変更する場合は、`orientation`に`"vertical"`または`"horizontal"`を設定します。デフォルトは、`"vertical"`が設定されています。
```tsx
```
### 形を変更する
```tsx
{(shape, index) => (
)}
```
### ステップ値を設定する
ステップ値を設定する場合は、`step`に値を設定します。
```tsx
```
### 無効にする
無効にする場合は、`disabled`を`true`に設定します。
```tsx
```
### 読み取り専用にする
読み取り専用にする場合は、`readOnly`を`true`に設定します。
```tsx
```
### ツールチップを表示する
```tsx
const [value, setValue] = useState(0.5)
return (
)
```
### 開始と終了のイベントをハンドルする
開始と終了のイベントをハンドルする場合は、`onChangeStart`や`onChangeEnd`を使用します。
```tsx
const [value, onChange] = useState(0.5)
const [startValue, onChangeStart] = useState(0.5)
const [endValue, onChangeEnd] = useState(0.5)
return (
Value: {value}, Start Value: {startValue}, End Value: {endValue}
)
```
### 制御する
```tsx
const [value, setValue] = useState(0.5)
return
```
## 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" \| "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. |
## アクセシビリティ
現在、v2の移行に伴い、このセクションは更新中です。