1
HTML + CSSInputs
Sliding number stepper
Plus and minus buttons around a number that slides in from above or below as it changes.
Settings
16px
1x
Code
<div class="uv-in2q"><button class="mn">−</button><span class="nm"><b>1</b></span><button class="pl">+</button></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Inputs
Where to use it
A quantity stepper is at home next to anything you buy more than one of: the cart of an online shop, tickets for a concert or the number of guests in a table booking. The number rolls up or down as it changes, and the minus switches off at one. A quantity input in HTML, CSS and a little JavaScript.
The demo stops at 99; set the maximum to your real stock so nobody orders what you cannot send. The buttons are round and fairly big, so leave them that size on phones where fingers need room.