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 :)
Answer
There could be two solutions to this problem
1) Use a range slider with limitations, check out this Ion RangeSlider with limitation demo
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
No comments:
Post a Comment