I have a typical form with dropdown choices, freeform textboxes and textarea for large fields.

I now need to add a range for things like this.

Start / End Time Start / End Day Low Bid / High Bid

I can do this by simply having 2 different controls and have folks choose seperately but i was thinking there might be a better way given the validation functionality seems generic (i don't want anyone to be able to choose a value for the End / High number that is lower than the Low / Start number and visa versa.

What is the best UI for this?


While I have no idea how to implement it, I saw the following on kayak.com recently and it might work for your purposes. There are sliders for Min and Max. IN this case, as you are sliding it displays a graph showing the price of flights for that selection. I've seen similar on ebay motors and other places.

I prefer this UI over having separate controls for Min and Max (or Start and End, etc.) The entire schedule or range is on a single control and the user has immediate feedback on the consequences of their changes.



I think the page on forms from Dive Into HTML5 will be helpful to you...just don't overlook the part where it touches on using feature detection (Modernizr) and a fallback.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.