How to enter a number from a range on a mobile web app?

Question

I'm designing a web app for smartphones that allows the user to enter some numbers within a large range (say 0-511 or 0-1023). The numbers are exact and equally likely to be spread across the whole range. What's the best control to use for that? Typical spinner buttons are likely to be too small to use on a mobile touchscreen. Someone suggested a modified spinner with the decrement button on the left and increment on the right, but I don't think anyone would actually use the buttons since the range is so large. It would be easier to just type the number into a box. In that case is a simple text field with input validation good enough?

Answer 1

It would be easier to just type the number into a box. In that case is a simple text field with input validation good enough?

That is surely the most sensible thing to do. Spinners would require plenty more than the three or four actions needed to hit each digit on a keypad.

Of course, you would want to show something like "Enter a number between 0 and 1023" next to the box (at risk of stating the obvious).

Answer 2

Another option may be a slider where the handle can be dragged with just a user's thumb, since I think jumping into the keyboard is sometimes a pain. (minor inconvenience but on mobile that's a bigger deal)

an example of what I'm taling about : http://dribbble.com/shots/111446-Slider , just with the number that a user has selected above the handle as they drag it around.

This might be less convenient for large numbers like you mentioned because exactness may be harder to obtain but you could experiment with where too large a number became an issue, or if the exactness isn't really an issue for your app then that issue may be ignored.