I'm writing a web application with HTML5/JS. On one page there are two numeric inputs (A and B) where input B must always be equal or higher than input A. So if the user enters 500 in A, B must be 500 or higher. The absolute maximum of B is double as high as the absolute maximum from A.

So, these are the requirements in short:

  • A may be 100 max.
  • B may be 50 max.
  • B must always be equal or higher than A

How could I display the dependencies to the user and how should I avoid wrong user input? I thought of something like a slider with two knobs, as the user wont be able to move knob A beyond knob B. I'm not sure about this as I don't know how good such an element could be handled on a mobile device. What could be other solutions? Thanks :)

  • Have you tried to design this? If you have, can you share your designs?
    – UXerUIer
    Commented Sep 11, 2015 at 12:35
  • @Majo0od: Not yet. At the moment the user has two independet input fields so he may be able to enter invalid values.
    – Fidel90
    Commented Sep 14, 2015 at 5:02

2 Answers 2


There could be two solutions to this problem

1) Use a range slider with limitations, check out this Ion RangeSlider with limitation demo

below is the image for Ion Range Slider

2) Second Option or way to reach the same objective is mixing Input field with a slider control. Enable/Show B after user enters into the Input A

second option

  • Thanks for mentioning Ion. Looks like a very powerful slider that may help me with the problem :)
    – Fidel90
    Commented Sep 14, 2015 at 5:10

You can see examples of this type of interaction on airline ticketing sites. When specifying going and returning dates, they need to ensure that the travel to the destination is before the return date.

They way they handle this is by placing the controls in a particular order. They always ask the user to specify the depart on date before asking them to declare the date of return. This can of course work only if there is a sequence that you would like to promote through the UI, i.e. ensure that in most cases users enter A before entering B. In case the user enters B before A then you let the user enter A, validate whether that falls within the acceptable limit. If not then show an error when the form is submitted OR immediately indicate an issue the entry. (Much like what happens when creating new accounts and username is already taken)

You could also reduce chances of these errors by placing appropriate help text to explain the dependency to the users.

Another related interaction I can think of is when changing or creating password users are expecting to enter the identical values in both the fields.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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