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

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?

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.

• I kind of feel like the range input is better for something that has a big step like 50; number feels more appropriate for things like 1-5 items when you're filling a shopping basket and want to be very precise. What do you think? – Rahul Aug 25 '10 at 22:45
• Without knowing the purpose, a slider in increments of 50 could make sense. What if they allow a large number of increments of 50? Then it doesn't because the increments are too small to use with ease. – Susan R Aug 25 '10 at 23:22
• Yeah, that's what I'm saying, a slider. The number input type isn't a slider, though, it's a small input box with an up/down arrow next to it, so you have to click several times in order to move several increments. Seems awkward if you could just drag a slider. – Rahul Aug 25 '10 at 23:34
• @Rahul I think a slider, or input type of "range", is a valid suggestion. All the same attributes apply to a range: min, max, step, value. The only reason I would suggest an input type of number here instead of a slider is that a slider requires a maximum, and the question didn't specify a maximum value - only a step. If you don't have a maximum value, a range slider doesn't make sense. Plus I'm not in love with the UI of the slider because it doesn't show the updated value as you move the slider. That requires extra JS. – RussellUresti Aug 26 '10 at 2:06
• That's a great point. Good call! – Rahul Aug 26 '10 at 10:12

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

• StackExchange really needs an iPad version, this is horrible! – Rahul Aug 25 '10 at 22:17
• I think this is a good suggestion - sliders are good looking UI elements, and it certainly restricts the input to multiples of 50 since the user can't type anything in. But a slider indicates minimums and maximums; what do you do if there is no maximum value a user can enter? – RussellUresti Aug 26 '10 at 2:18
• lol, yeah. The CAPTCHA is broken on iPad, too. – Robert Fraser Aug 26 '10 at 2:50
• Most times, you have at least a minimum of 0, and you can possibly extend the slider end or make it nonlinear. One exception here is in graphics programs (i.e. in Maya or 3DS Max, the same input control needs to support -40000 and 0.01) – Robert Fraser Aug 26 '10 at 2:53
• @RussellUresti Great point, hadn't thought of that. – Rahul Aug 26 '10 at 10:12

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"?

• Pragmatic! But reading "14 x 50" isn't really Don't Make Me Think. I can't do that math without stopping and thinking about it, can you? – Rahul Aug 25 '10 at 23:35

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.

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

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.