Is there a way on mouse leave return to initial position?

[theexplay]

Hello, Is there a way on mouse leave return to initial position? It would be great if there was an API like this.

Now i'm using react key to rerender on mouse leave

[nerdyman]

Hey @theexplay, thanks for opening the issue!

It's not currently possible to reset the position back to the original from the parent due to how prop updates are handled, but it's definitely a valid use case.

Using a key is probably the best way to do it for now, or set it to something like 50.0001, but I'm open to suggestions on how to achieve it without hacks.

I was thinking of exposing the updateInternalPosition function to the parent using a hook or ref but haven't decided on the best approach yet. It might also be possible to refactor the logic in the link above to respect the parent position but I don't think the useEffect will be triggered if the position prop passed to the parent on mouse leave is the same value as the current position.

[theexplay]

I like the idea of providing api updateInternalPosition via ref

[nerdyman]

This has been released in v3!

See the reset on pointer leave and useReactCompareSliderRef examples for usage.

npm install react-compare-slider@latest
yarn add react-compare-slider@latest
pnpm install react-compare-slider@latest