--- title: HueSlider description: "`HueSlider` is a component used to allow the user to select a color hue." links: - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/hue-slider - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-hueslider--basic --- ```tsx ``` ## Usage ```tsx import { HueSlider } from "@yamada-ui/react" ``` ```tsx import { HueSlider } from "@/components/ui" ``` ```tsx import { HueSlider } from "@workspaces/ui" ``` ```tsx ``` ### Change Size ```tsx {(size, index) => ( )} ``` ### Set Default Value To set a default value, set a value to `defaultValue`. ```tsx ``` ### Set Min and Max 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"`. By default, `"horizontal"` is set. ```tsx ``` ### Change Shape ```tsx {(shape, index) => ( )} ``` ### Set Step Value To set a 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(50) return ( ) ``` ### Handle Start and End Events To handle start and end events, use `onChangeStart` or `onChangeEnd`. ```tsx const [value, onChange] = useState(180) const [startValue, onChangeStart] = useState(180) const [endValue, onChangeEnd] = useState(180) return ( Value: {value}, Start Value: {startValue}, End Value: {endValue} ) ``` ### Control ```tsx const [value, setValue] = useState(180) return ``` ## Props ### HueSlider.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` | `"md"` | `"lg" \| "md" \| "sm" \| "xl" \| "xs"` | The size of the component. | | `variant` | - | `"outline" \| "solid"` | The variant of the component. | | `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` | `360` | `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` | - | `HueSliderOverlayProps` | 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` | `1` | `number` | The step in which increments or decrements have to be made. | | `thumbProps` | - | `HueSliderThumbProps` | 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` | - | `HueSliderTrackProps` | 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. | ### HueSlider.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. | ### HueSlider.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. | ### HueSlider.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.