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.
<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.