Is there a way to rotate vertically a SliderPicker from react-color library?

Question

This is my component without rotation (it works perfectly): horizontal

But I need it vertical, so I added this: transform: rotate(270deg)

And it looks like this: vertical

But when I click over the colored bar the dot is stuck at the bottom of the line

While more to the left over the colored bar I click more up the dot goes.

Here the code:

const Wrapper = styled.div`
  height: 365px;
  width: 170%;
  align-items: center;
  display: flex;
`;
const PickerArea = styled.div`
  width: 100%;
  transform: rotate(270deg);
`;

const PaintSelection = ({ circleColor, setCircleColor }) => {
  const { setActiveColor, recentColors } = React.useContext(Context);

  return (
    <Wrapper>
      <PickerArea>
        <SliderPicker
          direction="vertical"
          color={circleColor}
          onChange={(color) => {
            setCircleColor(color.hex);
            setActiveColor(color.hex);
          }}
        />
      </PickerArea>
    </Wrapper>
  );
};

Answer 1

this issue describes exactly what you want to do and the author says it's not supported and not will be worked on in the future to maintain the package size

https://github.com/omgovich/react-colorful/issues/178

i found this though telerik.com/kendo-react-ui/components/inputs/colorgradient/

which is what you want however it's size is 10x more