Function useColorSlider

packages/react-aria/src/color/useColorSlider.ts:55–172

(
  props: AriaColorSliderOptions,
  state: ColorSliderState
)

 * Color sliders allow users to adjust an individual channel of a color value.
 */
export function useColorSlider(
  props: AriaColorSliderOptions,
  state: ColorSliderState
): ColorSliderAria {
  let {trackRef, inputRef, orientation, channel, 'aria-label': ariaLabel, name, form} = props;

  let {locale, direction} = useLocale();

  // Provide a default aria-label if there is no other label provided.
  if (!props.label && !ariaLabel && !props['aria-labelledby']) {
    ariaLabel = state.value.getChannelName(channel, locale);
  }

  let {groupProps, trackProps, labelProps, outputProps} = useSlider(
    // @ts-ignore - ignore unused incompatible props
    {...props, 'aria-label': ariaLabel},
    state,
    trackRef
  );
  let {inputProps, thumbProps} = useSliderThumb(
    {
      index: 0,
      orientation,
      isDisabled: props.isDisabled,
      name,
      form,
      trackRef,
      inputRef
    },
    state
  );

  let value = state.getDisplayColor();
  let generateBackground = () => {
    let to: string;
    if (orientation === 'vertical') {
      to = 'top';
    } else if (direction === 'ltr') {
      to = 'right';
    } else {
      to = 'left';
    }
    switch (channel) {
      case 'hue': {
        let stops = [0, 60, 120, 180, 240, 300, 360]
          .map(hue => value.withChannelValue('hue', hue).toString('css'))
          .join(', ');
        return `linear-gradient(to ${to}, ${stops})`;
      }
      case 'lightness': {
        // We have to add an extra color stop in the middle so that the hue shows up at all.
        // Otherwise it will always just be black to white.
        let min = state.getThumbMinValue(0);
        let max = state.getThumbMaxValue(0);
        let start = value.withChannelValue(channel, min).toString('css');
        let middle = value.withChannelValue(channel, (max - min) / 2).toString('css');
        let end = value.withChannelValue(channel, max).toString('css');
        return `linear-gradient(to ${to}, ${start}, ${middle}, ${end})`;