1
HTML + CSSInputs

Selector de cantidad deslizante

Botones de más y menos alrededor de un número que entra desde arriba o desde abajo al cambiar.

Ajustes

16px
1x

Código

<div class="uv-in2q"><button class="mn">−</button><span class="nm"><b>1</b></span><button class="pl">+</button></div>

Prompt para IA

Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.

Más en Inputs

Dónde usarlo

Un selector de cantidad va junto a todo lo que se compra por unidades: el carrito de una tienda online, las entradas de un concierto o el número de comensales al reservar mesa. El número sube o baja al cambiar y el menos se desactiva en uno. Un input de cantidad en HTML, CSS y un poco de JavaScript.

La demo llega hasta 99; ajusta el máximo a tu stock real para que nadie pida lo que no puedes enviar. Los botones son redondos y generosos, así que no los encojas en el móvil, donde los dedos necesitan sitio.