Is there a way to control the slider position using the keyboard?

[lucianourgal]

This would be interesting because of accessibility issues.

[nerdyman]

Hi @lucianourgal, thanks for opening this issue!

The library doesn't currently provide keyboard bindings but I'm definitely onboard with implementing some functionality or accepting a PR. I looked into it briefly before but was unsure on how to make the component properly accessible (with the correct aria tags etc.).

With the current version it's possible to implement your own keyboard functionality by adding a tabIndex to the slider component to make it foscuable and then updating the position property on the slider when keyboard left, right, up, or down is pressed.

Here's a super basic demo listening to the ArrowLeft and ArrowRight keydown events to move the slider position left or right when the slider has focus.

• https://vspw1.csb.app/
• https://codesandbox.io/s/react-compare-slider-simple-example-forked-vspw1?file=/src/App.jsx:210-256

[lucianourgal]

Thank you @nerdyman, it worked!

[nerdyman]

Awesome! Thanks for opening the issue, I'll see if there's a clean way to add this to library in future.

[moloko]

Apologies for commenting on a closed issue, but just wanted to suggest that alternative way to do this would be to include an HTML 'range' <input> element that's visually hidden but could still be accessed by assistive tech. As this is a standard HTML element it shouldn't require any extra work to make it accessible.

I'm going to be using this component on a project I'm working on which will need to have accessibility support - so I plan to try something along these lines.

Really nice component btw, thanks for making this available.

[nerdyman]

That's a good shout @moloko! Let me know how it goes, I'm totes up for improving accessibility.

[nerdyman]

This has been released in v3!

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