Slider Controlled Component loses accessibility, but need dynamic value.,

[arkmech]

Is there a way to achieve both?

1. Controlled component, I have the ability to tie the value of it to React State and when I drag and change the value, the label dynamically updates. I lose some accessibility functionality, like holding down arrow keys to slide.
2. Uncontrolled component, full accessibility, but unable to get the current value while value is changing. I tried to use onValueCommit to return the updated value as a workaround, but doesn't work. How do I get the current value parameter to put in onValueCommit? This isn't really dynamic as only updates after user stops sliding.

Is it only one or the other?

Edit: Also sliding with controlled component is pretty buggy. When clicking on the thumbs, and dragging it, mouse cursor doesn't hold on the thumb so can't slide. Have to click on the track to drag, but then if you have two thumbs they keep sticking together. After playing around, I would like to stick to controlled components for best accessibility, but want dynamic values someway.

[joaom00]

Hi @arkmech,

Controlled component, I have the ability to tie the value of it to React State and when I drag and change the value, the label dynamically updates. I lose some accessibility functionality, like holding down arrow keys to slide.

I tested controlled slider and didn't loses the arrow down functionality. Can you provide a sandbox?

[benoitgrelard]

Yes, controlling it shouldn't break any accessibility, it only controls the state so you have access to the value outside.