Combining Html Number & Select Inputs

This is what I've tried: I'm trying to acheive: an input with up/down arrow that moves between values of 12

Solution 1:

To answer your first bullet point, you can use min, max, and step on the number input to get the up/down arrows to move between multiples of 12, like this:

<inputtype="number"min="12"max="5000"step="12">

To combine a dropdown/spinner and a number input, take a look at this question: Drop Down Menu/Text Field in one

The accepted answer should let you do what you need to do, although it takes a bit of coding. Another answer farther down suggests using <datalist>, which sort of works and is much simpler but behaves oddly after you enter a value into the input - the dropdown options disappear and you only see the current value as an option. If you're ok with that behavior and just want a simple solution, I recommend using something like below, but if you want something that works a little better, definitely take a look at the question linked above instead.

<inputtype="number"list="quantities"min="12"step="12"><datalistid="quantities"><optionvalue="12"><optionvalue="24"></datalist>

I didn't include all the options up to 5000, but you get the idea. I'm sure there's a way to fill in the options programmatically without typing them by hand, too - I would start by searching for "using an array as datalist options" or something if you're interested in doing that, although I've never done it myself. I imagine there's a way to create an array of options in JavaScript and pass it in.