Question ... What would be the correct HTML structure for 2 inputs controlling a single value? In my case both an input slider and a text (number) input. eg:
Be awesome to hear what an accessibility pro recommends!
George Francis
Posted on
Correct HTML structure for 2 inputs controlling a single value?
For further actions, you may consider blocking this person and/or reporting abuse
Top comments (2)
Adam Silver is pretty much the authority on form design patterns (you should check out his book also called “form design patterns”, it’s super useful for such questions).
He released an article on a similar topic earlier in the year which you can read here.
Personally I am of the opinion of 1 input for 1 job and use the input with the widest support. This simplifies the UX and markup considerably and stops confusing cases on screen readers with labelling etc.
Oh cool! Thanks so much for the link James :) I'll definitely check that out.
I'm definitely with you on the 1-input-1-job thing, but for my use case here it's not exactly a form, it's a control for graphic design software and I think the integer & slider input could be helpful for some folks (I use Framer a lot and this is a pattern they use a bit)
Perhaps it could be good to dynamically display one of the inputs if a user needs it 🤔
Always a pleasure!