Saturation range mode

[Mrezagolbaba]

How can I use saturation like hue and alpha in range mode?
I need this one
Hue
Saturation
Shade
Alpha

[jaywcjlove]

There seems to be something that is not easy to achieve. @Mrezagolbaba

https://codesandbox.io/s/react-color-example-59-f9v1f?file=/src/App.js:0-892

import { useState } from "react";
import Hue from "@uiw/react-color-hue";
import ShadeSlider from "@uiw/react-color-shade-slider";
import Alpha from "@uiw/react-color-alpha";
import { hsvaToHex } from "@uiw/color-convert";

export default function App() {
  const [hsva, setHsva] = useState({ h: 0, s: 0, v: 68, a: 1 });
  return (
    <div>
      <h1>{hsvaToHex(hsva)}</h1>
      <Hue
        hue={hsva.h}
        style={{ marginTop: 10 }}
        onChange={(newHue) => {
          setHsva({ ...hsva, ...newHue });
        }}
      />
      <ShadeSlider
        hsva={hsva}
        style={{ marginTop: 10 }}
        onChange={(newShade) => {
          setHsva({ ...hsva, ...newShade });
        }}
      />
      <Alpha
        hsva={hsva}
        style={{ marginTop: 10 }}
        onChange={(newAlpha) => {
          setHsva({ ...hsva, ...newAlpha });
        }}
      />
    </div>
  );
}

This requires writing a new component.

[jaywcjlove]

@Mrezagolbaba Custom <Saturation /> components.

https://codesandbox.io/s/react-color-example-59-f9v1f?file=/src/App.js:0-2223

import { useState } from "react";
import Hue from "@uiw/react-color-hue";
import ShadeSlider from "@uiw/react-color-shade-slider";
import Saturation from "@uiw/react-color-saturation";
import Alpha, { BACKGROUND_IMG } from "@uiw/react-color-alpha";
import { hsvaToHex, hsvaToRgbaString } from "@uiw/color-convert";

const Pointer = ({ style, color, ...props }) => (
  <div
    {...props}
    style={{
      height: 28,
      width: 28,
      position: "absolute",
      transform: "translate(-14px, -4px)",
      boxShadow: "0 2px 4px rgb(0 0 0 / 20%)",
      borderRadius: "50%",
      background: `url(${BACKGROUND_IMG})`,
      backgroundColor: "#fff",
      border: "2px solid #fff",
      zIndex: 1,
      ...style
    }}
  >
    <div
      style={{
        backgroundColor: color,
        borderRadius: "50%",
        height: " 100%",
        width: "100%"
      }}
    />
  </div>
);

export default function App() {
  const [hsva, setHsva] = useState({ h: 0, s: 0, v: 68, a: 1 });
  return (
    <div>
      <h1
        style={{
          backgroundColor: `${hsvaToRgbaString(hsva)}`,
          backgroundImage: `url(${BACKGROUND_IMG})`
        }}
      >
        {hsvaToHex(hsva)}
      </h1>
      <Saturation
        hsva={hsva}
        radius="8px 8px 0 0"
        style={{
          width: "auto",
          height: 50,
          minWidth: 120,
          borderBottom: "12px solid #000"
        }}
        pointer={({ left, top, color }) => (
          <Pointer
            style={{ left, top, transform: "translate(-16px, -16px)" }}
            color={hsvaToHex(hsva)}
          />
        )}
        onChange={(newColor) => {
          setHsva({ ...hsva, ...newColor });
        }}
      />
      <Hue
        hue={hsva.h}
        style={{ marginTop: 10 }}
        onChange={(newHue) => {
          setHsva({ ...hsva, ...newHue });
        }}
      />
      <ShadeSlider
        hsva={hsva}
        style={{ marginTop: 10 }}
        onChange={(newShade) => {
          setHsva({ ...hsva, ...newShade });
        }}
      />
      <Alpha
        hsva={hsva}
        style={{ marginTop: 10 }}
        onChange={(newAlpha) => {
          setHsva({ ...hsva, ...newAlpha });
        }}
      />
    </div>
  );
}

[Mrezagolbaba]

@jaywcjlove I think the color tonnage for saturation is incorrect. because Shade is how much black there is.
saturation is how strong/weak a color is