Svelte Number Spinner
2021
A highly configurable number spinner component for Svelte. It's a simple input field with a number that can be controlled using the mouse or keyboard. Pressing Alt or Alt+Shift makes steps smaller or bigger. Clicking on the input field without dragging the mouse or pressing Enter or any other non-control key like -, 1, 2, 3, … starts the normal input mode.
I've seen this kind of control in some applications, mainly when it comes to edit lots of parameters with little space like in CAD software. This behaviour is not implemented in standard HTML number input fields and I haven't found it in the big UI component libraries like Material UI. So, I tried to build it by myself.
Demos
Simple example using this component for choosing a color
Number spinner demo showing many options