Posted on
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!
For further actions, you may consider blocking this person and/or reporting abuse
Freecodez -
easetemplates -
The Builder -
Karelle Hofler -
Once suspended, georgedoescode will not be able to comment or publish posts until their suspension is removed.
Once unsuspended, georgedoescode will be able to comment and publish posts again.
Once unpublished, all posts by georgedoescode will become hidden and only accessible to themselves.
If georgedoescode is not suspended, they can still re-publish their posts from their dashboard.
Once unpublished, this post will become invisible to the public and only accessible to George Francis.
They can still re-publish the post if they are not suspended.
Thanks for keeping DEV Community safe. Here is what you can do to flag georgedoescode:
Unflagging georgedoescode will restore default visibility to their posts.
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!