SaturationSlider

SaturationSlider is a component used to allow the user to select a color saturation.

Theming

The SaturationSlider is a multi part component.

If you want to change the style of the component, please check here.

export const SaturationSlider: ComponentMultiStyle<"SaturationSlider"> = {
  baseStyle: {
    container: {
      cursor: "pointer",
      rounded: "md",
      w: "full",
      _disabled: {
        cursor: "not-allowed",
        opacity: 0.6,
      },
      _readOnly: { cursor: "auto" },
    },
    inner: {
      rounded: "md",
    },
    overlay: {
      rounded: "md",
    },
    thumb: {
      borderColor: "whiteAlpha.950",
      borderWidth: "3px",
      boxShadow: ["md", "dark-md"],
      outline: 0,
      rounded: "full",
      transitionDuration: "normal",
      transitionProperty: "transform",
      _active: {
        transform: `scale(1.15)`,
      },
      _focusVisible: {
        boxShadow: ["outline", "outline"],
      },
    },
    track: {},
  },

  sizes: {
    sm: {
      container: { maxW: "xs" },
      thumb: { boxSize: "3" },
    },
    md: {
      container: { maxW: "sm" },
      thumb: { boxSize: "4" },
    },
    lg: {
      container: { maxW: "md" },
      thumb: { boxSize: "5" },
    },
    full: {
      container: { maxW: "full" },
      thumb: { boxSize: "5" },
    },
  },

  defaultProps: {
    size: "md",
  },
}

Copied!

Edit this page on GitHub

PreviousAlphaSlider NextEditable