Preisfilter mit Wertblasen
Zwei Regler mit kleinen Wertblasen, hervorgehobenem Bereich dazwischen und der Spanne darüber.
Einstellungen
Code
<div class="uv-frp"><div class="hd"><span>Preis</span><b class="out">40 € – 160 €</b></div><div class="tk"><span class="fill"></span><i class="h a" data-h="a"><em>40 €</em></i><i class="h b" data-h="b"><em>160 €</em></i></div></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
Wofür du ihn nutzen kannst
Der Preisfilter eines Möbel-Onlineshops ist der klassische Einsatzort: Mit dem linken Regler blendest du die günstigsten Stücke aus, mit dem rechten bleibst du im Budget. Beim Ziehen zeigt eine Blase den genauen Betrag. Wer einen doppelten Range-Slider oder Preisfilter in HTML und CSS sucht, ist hier richtig.
Runde die Werte auf sinnvolle Schritte, etwa auf Zehner, statt 43 oder 127 anzuzeigen. Setz das Maximum in die Nähe deines teuersten Produkts. Liegt es viel zu hoch, wird der nützliche Teil der Leiste zusammengequetscht.