Svelte Number Spinner



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.


Simple example using this component for choosing a color

Number spinner demo showing many options

View on GitHub

© 2011–2023 Hartmut Bohnacker