Número que se arrastra
Arrastra la etiqueta a izquierda o derecha para cambiar el valor, como en las apps de diseño.
Ajustes
Código
<div class="uv-isc"><div class="rw"><label for="uv-isc-in" class="hd" title="Arrastra para cambiar"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 7l-5 5 5 5M16 7l5 5-5 5"/></svg><span>Radio</span></label><span class="fd"><input id="uv-isc-in" type="number" inputmode="numeric" min="0" max="120" value="24"><span class="un">px</span></span></div><div class="rl" aria-hidden="true"><i class="bar"></i><b class="lg"></b><b></b><b></b><b></b><b class="lg"></b><b></b><b></b><b></b><b class="lg"></b><b></b><b></b><b></b><b class="lg"></b><b></b><b></b><b></b><b class="lg"></b><b></b><b></b><b></b><b class="lg"></b><b></b><b></b><b></b><b class="lg"></b></div><div class="pv" aria-hidden="true"></div></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
Ver todos: InputsDónde usarlo
Figma, Blender y la mayoría de herramientas de diseño dejan cambiar números arrastrando su etiqueta, mucho más rápido que teclear para ajustes finos. Este input hace lo mismo: al pasar por la etiqueta aparece el cursor de redimensionar, arrastras en horizontal para cambiar el valor y con Mayúsculas los pasos son mayores. Una regla con línea de progreso y una forma de muestra reaccionan en vivo.
El campo numérico sigue siendo editable con teclado y respeta su mínimo y máximo. Ajusta el máximo con el control extra y úsalo en paneles de ajustes o configuradores.