6

The application interface I am working on has a slider to select a number, but offers a text input field next to it. This allows you to read the currently selected value, but also supports keyboard input, as an alternative. The sliders have range limitations that get enforced by the slider range when dragging the slider, but separately validated once the user blurs the input field, if they use keyboard input.

The thing I am struggling with is a feature to automatically correct the number input while the user types. This is not absolutely necessary, but with the slider interactively changing some results, it would be nice to constantly have a valid value.

With numbers greater than the maximum limit, it is quite easy to make the number simply reset to the maximum. However, when there is a minimum limit, this auto-correcting becomes harder to handle:

Imagine the limit would be 0-145. The user starts typing 2, then 1. So far so good. Then follows input 5 and the number 215 being greater than 145 means the input and slider get reset to 145.

But if the limit would be 15-145: Any number the user types will start with a single digit and thus be smaller than the minimum limit of 15. What are possible options to deal with this?

Improve this question
1
  • How do you handle invalid entry in other fields, or required fields which are blank?
    – Erics
    Dec 16, 2012 at 5:11

2 Answers 2

Reset to default
5

If you automatically change some text input, the user may not notice that it has been changed. That will lead to a mismatch between what they expect and what happens.

I can see two possible solutions to this:

  1. Only allow the value to be changed with the slider, and make the input field a read only field. This is the simplest to do, and I believe the simplest for users.
  2. If you really need text input, you should validate it, and if it is not a valid number, you should notify the user in some way, and explain what valid values are. If there is some submit or similar button, then validate when that is selected. If not, then validate when there is:
    a) a change in focus
    b) no activity for an amount of time (usually 0.5 - 1.0 seconds is enough)
Improve this answer
1
  • 1
    +1 Option #2 is pretty much what Photoshop does, and they've been using slider+text entry for a while now. When the numeric text field loses focus and is out of bounds it sets the value to the closest in bounds number and puts up a modal telling you "An integer between n and n2 is required. Closest value inserted."
    – obelia
    Dec 16, 2012 at 17:50
1

You can validate user input as soon as the user leaves focus from the text input field..

If it is less than your minimum limit then you can auto correct the same to the minimum limit and convey the same to user via some highlighted text or alert box..

Improve this answer
2
  • This is what I allready do, my question is about additonal validation on key up. ("The sliders have range limitations ... but [get] separately validated once the user blurs the input field")
    – kontur
    Dec 21, 2012 at 8:29
  • you need to validate only when user has done with typing..validating and prompting user in-between may be annoying..and if you are not prompting while validating as the user types then there is no point validating as you are validating on blur..additionally, what i feel like more appropriate is validating data on submit rather than validating as the user types or on blur..
    – 000
    Dec 21, 2012 at 8:44

Your Answer

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

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