--- title: AlphaSlider description: "`AlphaSlider` is a component used to allow the user to select color transparency." 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 ``` ## Usage ```tsx import { AlphaSlider } from "@yamada-ui/react" ``` ```tsx import { AlphaSlider } from "@/components/ui" ``` ```tsx import { AlphaSlider } from "@workspaces/ui" ``` ```tsx ``` ### Change Size ```tsx {(size, index) => ( )} ``` ### Set Default Value To set a default value, set a value to `defaultValue`. ```tsx ``` ### Set Minimum and Maximum Values To set minimum and maximum values, set numbers to `min` or `max`. ```tsx ``` ### Change Orientation To change the orientation, set `orientation` to `"vertical"` or `"horizontal"`. The default is `"vertical"`. ```tsx ``` ### Change Shape ```tsx {(shape, index) => ( )} ``` ### Set Step Value To set the step value, set a value to `step`. ```tsx ``` ### Disable To disable, set `disabled` to `true`. ```tsx ``` ### Read-Only To make read-only, set `readOnly` to `true`. ```tsx ``` ### Display Tooltip ```tsx const [value, setValue] = useState(0.5) return ( ) ``` ### Handle Start and End Change Events To handle start and end change events, use `onChangeStart` and `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} ) ``` ### Control ```tsx const [value, setValue] = useState(0.5) return ``` ## Uses Components & Hooks ## Used By Components & Hooks ## 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](https://www.w3.org/WAI/ARIA/apg/patterns/slider/) for accessibility. ### Keyboard Navigation | 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 | Roles and Attributes | Usage | | ------------------- | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `AlphaSlider.Thumb` | `role="slider"` | Indicates that this is a slider. | | | `aria-label` | Sets `"Slider thumb"`. | | | `aria-labelledby` | Sets the `id` of the related `AlphaSlider.Root`. | | | `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 `AlphaSlider.Root` 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. | | `SliderInput` | `aria-hidden` | Excludes the element from the accessibility tree. | | | `aria-describedby` | If `AlphaSlider.Root` 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. |