Stufen-Slider mit Markierungen
Ein Slider, der in ganzen Schritten einrastet. Der Regler wächst beim Ziehen, überschrittene Markierungen leuchten auf.
Einstellungen
Code
<div class="uv-frt"><div class="hd"><span>Mindestbewertung</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 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
Manche Werte ergeben nur in ganzen Schritten Sinn. Eine Bewertungsseite für Restaurants mit mindestens drei Sternen, eine Hotelsuche nach Kategorie, eine Fitness-App mit Trainingstagen pro Woche. Die Markierungen zeigen jeden möglichen Halt, und der Regler rastet dort ein, niemand landet bei 3,7. Gesucht wird so etwas als Slider mit Stufen oder Step-Slider.
Halte die Zahl der Stufen klein, fünf oder sechs reichen. Bei zwanzig Markierungen verschwimmen sie zu einer Linie, und das Einrasten hilft nicht mehr. Zeig den aktuellen Wert groß neben der Beschriftung, wie in der Demo.