Tu altura
Arrastra la cinta o usa las flechas
Cinta métrica con inercia
Elige tu altura arrastrando una cinta métrica amarilla que sigue deslizando con inercia y se encaja en el centímetro más cercano.
Ajustes
Código
<div class="uvq15-tap"><p class="hd"><span>Tu altura</span><output class="v"><b>170</b><small>cm</small></output></p><div class="win" role="slider" tabindex="0" aria-label="Tu altura" 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">Arrastra la cinta o usa las flechas</p></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 Microinteracciones
Ver todos: MicrointeraccionesDónde usarlo
Elegir altura, peso o cantidad con botones de más y menos es pesado. Este selector usa una cinta métrica amarilla bajo una marca roja: la arrastras, le das un golpe y sigue deslizando con impulso, se estira con resistencia al pasar de los extremos y se encaja justo en el centímetro más cercano. La cifra grande de arriba cambia mientras se mueve.
El ajuste Inercia decide hasta dónde llega la cinta tras un golpe. Las flechas mueven un centímetro, Re Pág y Av Pág diez, y la rueda del ratón también sirve. Cambia el rango en el script y las etiquetas del marcado para medir peso o distancia.