Zahlenfeld zum Ziehen
Zieh das Label nach links oder rechts, um den Wert zu ändern, wie in Design-Apps.
Einstellungen
Code
<div class="uv-isc"><div class="rw"><label for="uv-isc-in" class="hd" title="Ziehen zum Ändern"><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>Radius</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 für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Eingabefelder
Alle ansehen: EingabefelderWofür du ihn nutzen kannst
In Figma, Blender und den meisten Designtools ändert man Zahlen, indem man ihr Label zieht, viel schneller als Tippen für Feinjustierungen. Dieses Feld macht es genauso: Über dem Label erscheint der Größenänderungs-Cursor, horizontales Ziehen ändert den Wert, mit Shift in größeren Schritten. Ein Lineal mit Fortschrittslinie und eine Vorschauform reagieren live.
Das Zahlenfeld bleibt per Tastatur editierbar und respektiert Minimum und Maximum. Stell das Maximum mit dem Zusatzregler ein und nutze es in Einstellungen, Editoren oder Konfiguratoren.