Tu altura
Arrastra la cinta o usa las flechas
Mètre ruban avec inertie
Choisis ta taille en faisant glisser un mètre ruban jaune qui continue sur sa lancée et se cale sur le centimètre le plus proche.
Réglages
Code
<div class="uvq15-tap"><p class="hd"><span>Ta taille</span><output class="v"><b>170</b><small>cm</small></output></p><div class="win" role="slider" tabindex="0" aria-label="Ta taille" 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">Fais glisser le ruban ou utilise les flèches</p></div>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Micro-interactions
Voir tout : Micro-interactionsOù l’utiliser
Choisir une taille, un poids ou une quantité avec des boutons plus et moins est fastidieux. Ce sélecteur utilise un mètre ruban jaune sous un repère rouge : on le fait glisser, on le lance et il continue avec de l'élan, s'étire avec résistance au-delà des bornes et se cale pile sur le centimètre le plus proche. Le grand affichage suit le mouvement.
Le réglage Inertie fixe la distance parcourue après un lancer. Les flèches déplacent d'un centimètre, Page précédente et Page suivante de dix, et la molette fonctionne aussi. Change la plage dans le script et les étiquettes dans le balisage pour mesurer un poids ou une distance.