zillow / react-slider

Accessible, CSS agnostic, slider component for React.
https://zillow.github.io/react-slider
MIT License
883 stars 231 forks source link

How to handle key events when I have global listeners? #297

Open PEZ opened 1 year ago

PEZ commented 1 year ago

Thanks for providing this component!

I want to control an animation with the slider. So I have only one slider. I want the same things to happen when I press keys like right or left when the slider has focus as when it doesn't have focus. Currently I can control the animation with keys. The slider also has event handlers for the keys, and as I want to control the animation from the slider, it gets to be a double command that I don't know how to deal with. Anyone has some pointers for me?

Possibly related:

msf-caesar commented 10 months ago

Try with removing the event handlers for key events from the slider component. Instead, add a global event listener that listens for key events regardless of focus. In the event handler for the key events, check if the slider has focus. If it does, control the animation accordingly. This way, you can have consistent control over the animation whether the slider has focus or not.

PEZ commented 10 months ago

Thanks! 🙏 In my case it seems like removing the event handlers for the keys. Will start there.