Tu altura
Arrastra la cinta o usa las flechas
Maßband mit Trägheit
Wähle deine Größe, indem du ein gelbes Maßband ziehst, das mit Schwung weitergleitet und auf dem nächsten Zentimeter einrastet.
Einstellungen
Code
<div class="uvq15-tap"><p class="hd"><span>Deine Größe</span><output class="v"><b>170</b><small>cm</small></output></p><div class="win" role="slider" tabindex="0" aria-label="Deine Größe" aria-valuemin="120" aria-valuemax="220" aria-valuenow="170" aria-valuetext="170 cm"><div class="tp"><span style="left:calc(0 * var(--u))">120</span><span style="left:calc(10 * var(--u))">130</span><span style="left:calc(20 * var(--u))">140</span><span style="left:calc(30 * var(--u))">150</span><span style="left:calc(40 * var(--u))">160</span><span style="left:calc(50 * var(--u))">170</span><span style="left:calc(60 * var(--u))">180</span><span style="left:calc(70 * var(--u))">190</span><span style="left:calc(80 * var(--u))">200</span><span style="left:calc(90 * var(--u))">210</span><span style="left:calc(100 * var(--u))">220</span></div><i class="mk" aria-hidden="true"></i></div><p class="ht">Zieh das Band oder nutze die Pfeiltasten</p></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 Mikrointeraktionen
Alle ansehen: MikrointeraktionenWofür du ihn nutzen kannst
Zahlenauswahl für Größe, Gewicht oder Menge ist mit Plus- und Minus-Buttons mühsam. Dieser Regler nutzt ein gelbes Maßband unter einer roten Markierung: Zieh es, gib ihm Schwung, und es gleitet weiter, dehnt sich mit Widerstand über die Enden hinaus und rastet genau auf dem nächsten Zentimeter ein. Die große Anzeige darüber läuft mit.
Der Regler Trägheit bestimmt, wie weit ein Schwung das Band trägt. Pfeiltasten bewegen um einen Zentimeter, Bild auf und Bild ab um zehn, auch das Mausrad funktioniert. Ändere den Bereich im Skript und die Beschriftungen im Markup, um Gewicht oder Strecken zu messen.