Filtros
HTML + CSSFiltres
Filtres avec compteur de résultats animé
Quand on active des filtres, le nombre du bouton monte ou descend jusqu'au nouveau total.
Réglages
16px
1x
Code
<div class="uv-frc"><p class="ti">Filtres</p><label><span>Livraison gratuite</span><input type="checkbox" role="switch" data-f="0.62"><i aria-hidden="true"></i></label><label><span>En promo</span><input type="checkbox" role="switch" data-f="0.35"><i aria-hidden="true"></i></label><label><span>Note de 4 ou plus</span><input type="checkbox" role="switch" data-f="0.7"><i aria-hidden="true"></i></label><label><span>Nouveautés</span><input type="checkbox" role="switch" data-f="0.28"><i aria-hidden="true"></i></label><button type="button"><span>Voir</span> <b>1.248</b> <span>résultats</span></button></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
Voir tout : FiltresOù l’utiliser
Les panneaux de filtres sur mobile se terminent souvent par un bouton pour les appliquer, et afficher le nombre de résultats dessus prévient qu'on filtre trop avant d'appuyer. Chaque interrupteur multiplie le total par un facteur, et le chiffre du bouton défile jusqu'à la nouvelle valeur avec un ralenti doux, le changement se suit donc facilement.
Le compteur utilise la langue de la page pour les séparateurs de milliers. Remplace les facteurs par un appel à ton API ; les interrupteurs restent des cases natives.