Add 2D Mode

[jo-chemla]

It would be great for react-compare-slider to support a 2D mode, with onPositionChange callback that would be passed a 2D position array with x and y percentage, a bit similar to react-colorful (aria role=grid discussion) or leva vector2d control.

This feature is greatly illustrated in this feature request of imgui, and is like a combination of landscape and portrait modes. It could be useful for example to have:

• the x slider position influence the clip/crop of foreground vs background
• while the y position of the slider could play on transparency, between 0 and 100% opacity.

[nerdyman]

Thanks for opening this @jo-chemla. This is a cool use case, the slider could be changed to support a mode like mode="landscape|portrait|both" and onPositionChange could be updated to return the percentages for both too. I'll have a look at how this could work.

I saw a lib has been created from one of your issues on another repo, does that handle what you want to do? If so you could stick with it for now.

[jo-chemla]

Thanks for getting back so fast. Indeed I suggested the feature to other react slider comparison components, and @mattrothenberg came up with react-compare-2d which is a already a great design. I've submitted a PR to his repo for the feature to match what I had in mind - see this mockup - namely a few missing blocks:

• the slider handle should follow the cursor even in horizontal and vertical modes, currently fixed at 50%
• only the handle should be clickable like your prop onlyHandleDraggable
• it should also be possible to drag the gutter bars but they should be draggable only in the corrresponding direction

I'm still evaluating whether I should use existing components for that feature or build my custom component if the use-case is too specific. But I do think the usage is generic enough that it makes sense to integrate that functionality into existing split/sliders component for others to use and build upon.