Feature request: provide a way of detecting when react-slider has/loses focus

[moloko]

Use-case: I am using this component as a video progress bar/seek control. When the user tabs to the slider control, I want to be able to pause video playback so that the user can seek within the video easily. When they tab away, playback will automatically resume.

In v0.11.2 of react-slider this could be achieved by using the onBeforeChange and onAfterChange callbacks, but at some point these were changed so that they were only called if the action will/did result in a change - which I think is actually a very sensible change but does leave me in a situation where, after upgrading to v2.0.5, I can't achieve the same effect without a (rather hacky) workaround.

So, if this component could implement onFocus and onBlur callbacks that would solve the problem!

If you feel this would be of use I'm happy to have a go at implementing this. Equally if I'm being incredibly stupid and missing some very obvious way of doing this please let me know!

[msf-caesar]

Try with:

• Adding onFocus and onBlur callbacks to react-slider component.
• Use onFocus callback to trigger pause video playback when slider gains focus.
• Use onBlur callback to trigger resume video playback when slider loses focus.
• Implement the necessary logic to handle video playback in these callbacks.

[moloko]

Adding onFocus and onBlur callbacks to react-slider component

@msf-caesar that won't work because react-slider doesn't implement onFocus or onBlur. Hence my comment above:

So, if this component could implement onFocus and onBlur callbacks that would solve the problem!

The closest I could get was to use a ref to get hold of this internal ref then listen for the focusin and focusout events... but for obvious reasons that's not ideal and - IIRC - still wouldn't allow me to do exactly what I was trying to do.