nerdyman/react-compare-slider

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

theexplay opened this issue · 3 comments

theexplay commented

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 commented

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.

  • 👍1
theexplay commented

I like the idea of providing api updateInternalPosition via ref

  • 👍1
nerdyman commented

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
  • 👍1