Slider à crans avec repères
Un slider qui s’arrête sur des valeurs entières ; la poignée grossit quand on la tire et les repères franchis s’allument.
Réglages
Code
<div class="uv-frt"><div class="hd"><span>Note minimale</span><b class="out">3</b></div><div class="tk"><span class="fill"></span><span class="tick" style="left:0%"></span><span class="tick" style="left:20%"></span><span class="tick" style="left:40%"></span><span class="tick" style="left:60%"></span><span class="tick" style="left:80%"></span><span class="tick" style="left:100%"></span><i class="h"></i></div><div class="lb"><span>0</span><span>5</span></div></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 Filtres
Où l’utiliser
Certaines valeurs n’ont de sens qu’en nombres entiers. Un site d’avis sur les restaurants qui demande au moins trois étoiles, une recherche d’hôtels par catégorie, une appli de sport qui fixe les jours d’entraînement. Les repères montrent chaque arrêt possible et la poignée s’y cale, personne ne tombe sur 3,7. Un slider à crans, tout simplement.
Gardez peu de crans, cinq ou six. Avec vingt repères, ils se fondent en une ligne et l’accroche ne sert plus à rien. Affichez la valeur actuelle en grand à côté du libellé, comme dans la démo.