How to represent a numeric input that is limited to increments of some number

Question

I have a requirement for a form that restricts a field value to fixed increments of 50 and I'm not sure what would be the most elegant way to represent that constraint in a meaningful fashion.

The simplest solution that comes to mind is a jQuery validate method combined with some server-side logic that is tied to a normal text field input. Other alternatives that come to mind is a number picker of some sort (I don't know of one currently) that advances in set increments or a drop-down list with a fixed number of values.

Any other ideas? What would feel most intuitive to you?

Answer 1

I would suggest using the method implemented in Safari for HTML5. As you can see here there are new input types in HTML5 that have new attributes as well. In this case, you would be using an input type of number with an attribute called "step". The code would look like this:

<input type="number" step="50" min="0" name="some_name" value="0" id="some_name" />

Right now there aren't a lot of browsers that do anything with this. However, if you view that code in Safari (using an HTML5 doctype), what you see is a normal text input field with a control on the side that provides up / down arrows that increment the value inside the field by the "step" value you assigned.

So, for a UI element, I would replicate that for browsers that don't yet support it, an up / down arrow next to the input field. To let users know that you expect a specific value, you could just write "please enter a multiple of 50. ex: 0, 50, 100, 150, etc." Then, obviously, you will need either client-side or server-side code to validate that the number entered is within those ranges.

Answer 2

Use a slider. Most UI libraries offer slider controls and usually give you the option to define a 'step', such as 50, limiting the selection to any multiple of that value.

If you're using HTML5, the input tag has a "range" type (including a step attribute) which most browsers supporting HTML5 should support: http://dev.w3.org/html5/markup/input.range.html

Answer 3

What is the purpose?

If it was accounting/math/numbers related, I'd suggest a multiplier. So you see a "x 50" and it displays the total. If it's a increments of 50 for a logical application, then why not just use "increments of 50"?

Answer 4

I think its best to use a range slider as suggested by others. Or you can use an Autocomplete feature to a input box which will display the suggestion when user starts typing. Here are the cross browser example for both of these methods.

Slider: http://jqueryui.com/demos/slider/#range

Autocomplete: http://jqueryui.com/demos/autocomplete/

Answer 5

It really depends on the min & max values as well.

I've used just a regular selection list to show the possible values. And another solution is to just show the total in a simple manner, so the user can enter the multiplier themselves, but still see the result.

^{download bmml source – Wireframes created with Balsamiq Mockups}