Enhance RangeInput for keyboard entry

grommet / grommet

a react-based framework that provides accessibility, modularity, responsiveness, and theming in a tidy package

https://grommet.io

Apache License 2.0

8.32k stars 1.02k forks source link

Open ericsoderberghp opened 3 years ago

ericsoderberghp commented 3 years ago

It could be interesting to explore allowing numeric keyboard input when the RangeInput has focus. Some initial thoughts:

when the user types the first numeric character, the down arrow, or the space bar while the RangeInput has focus, a Drop is automatically added with a MaskedInput that ties in to min/max.
the user can then type a specific value and the visual knob tracks along with it
Esc closes the drop
Tab closes the drop and advances to the next component.

joaoGabriel55 commented 3 years ago

It would be a nice enhancement.

joaoGabriel55 commented 3 years ago

I am working on this

ericsoderberghp commented 2 years ago

I think this needs some design work first, around where the input is placed and how accessibility works. Then, implementation can follow.