So I’m playing with building a cross platform desktop scoring app for boxing events built on Electron from GitHub.

I plan to use the up on my Windows Tablet. In my case an Acer One.

As such I’m designing the app to be user friendly for buth mouse and touch users and want a UI control that lets a user pick a score value between 10 and 1.

HTML Number Input didn’t do what I want because no matter how I sized the font of the number and its container, I couldn’t get the up/down spinner to scale with the text.

I also tried the JQueryUI numeric spinner since I’m already using jQUery on the app but it didn’t look any better.

Enter one of the cool things about markup based UI, just role your own.

Here’s what I wanted.

And here is the code on JSFiddle.

Use and enjoy ๐Ÿ™‚