Filtros
Filter mit animiertem Trefferzähler
Beim Umschalten der Filter zählt die Zahl auf dem Button hoch oder runter bis zur neuen Summe.
Einstellungen
Code
<div class="uv-frc"><p class="ti">Filter</p><label><span>Kostenloser Versand</span><input type="checkbox" role="switch" data-f="0.62"><i aria-hidden="true"></i></label><label><span>Im Angebot</span><input type="checkbox" role="switch" data-f="0.35"><i aria-hidden="true"></i></label><label><span>Bewertung ab 4</span><input type="checkbox" role="switch" data-f="0.7"><i aria-hidden="true"></i></label><label><span>Neuigkeiten</span><input type="checkbox" role="switch" data-f="0.28"><i aria-hidden="true"></i></label><button type="button"><span>Ansehen</span> <b>1.248</b> <span>Ergebnisse</span></button></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 Filter
Alle ansehen: FilterWofür du ihn nutzen kannst
Mobile Filterpanels enden meist mit einem Button zum Anwenden, und die Trefferzahl darauf zeigt vor dem Tippen, ob man zu stark filtert. Jeder Schalter hier multipliziert die Summe mit einem Faktor, und die Zahl auf dem Button rollt mit sanftem Abbremsen zum neuen Wert, die Änderung ist also leicht nachzuvollziehen.
Der Zähler nutzt die Seitensprache für Tausendertrennzeichen. Ersetze die Faktoren durch einen Aufruf deiner API und lass den Button die einzige Aktion sein. Die Schalter bleiben native Checkboxen für Formulare und Screenreader.