I have an <input type="number" step="1"> element for choosing font size. However, given the context of drawing on a large canvas, changing the number by 1 is barely noticeable. It would be more convenient for users if they could step up or down by 5 or 10 each time they click the arrow.

I still need to keep the step attribute at 1 because the input should remain valid even with fine-grained values. Is there a way to achieve this behavior, like the below (pseudo) jump attribute. I am open to Javascript solutions too but AFAIK there is no such event for when user clicks the arrows.

<input type="number" min="1" max="1000" step="1" jump="5" value="100" />