As part of a project I worked on, I need a good mobile friendly, short range, number input… But the mobile selectors were inconsistent, and lack what I wanted, so I created a simple plug in.

I wanted something that was as easy on a desktop as a phone. The number input where you slide the number is good, but hard for the user to be accurate. The spinner is good, but I never liked how to use it, and its not always easy on a phone. So here is what I made.

The code is really easy to use, once you include the css and query. Its a simple number input tag, with the class as “number”, and the javascript does the rest. You can include additional information to make it more user friendly, like “data-value” which displays what you are counting on the inside, i.e. Guest, and “data-s” which specifies how to count plurality.

<input id="guest" class="number" max="5" min="-5" name="quantity" type="number" value="1" data-value="Guest" data-s="s" data-role="none">

And once you put it in, getting the value is as simple as getting the value from the input tag you created. The number that is in the new number input selector is inserted into the value of the original input tag.

Here is a demo file of it in action.