Range-Slider mit Histogramm
Balken über dem Slider zeigen die Verteilung der Ergebnisse, alles außerhalb deiner Spanne wird beim Ziehen blass.
Einstellungen
Code
<div class="uv-frh"><div class="hd"><span>Verteilung</span><b class="out">20 – 80</b></div><div class="bars"><span style="height:20%"></span><span style="height:22%"></span><span style="height:24%"></span><span style="height:27%"></span><span style="height:32%"></span><span style="height:38%"></span><span style="height:44%"></span><span style="height:53%"></span><span style="height:61%"></span><span style="height:70%"></span><span style="height:78%"></span><span style="height:84%"></span><span style="height:89%"></span><span style="height:90%"></span><span style="height:89%"></span><span style="height:84%"></span><span style="height:78%"></span><span style="height:70%"></span><span style="height:61%"></span><span style="height:53%"></span><span style="height:44%"></span><span style="height:38%"></span><span style="height:32%"></span><span style="height:27%"></span><span style="height:24%"></span><span style="height:22%"></span><span style="height:20%"></span><span style="height:19%"></span></div><div class="tk"><span class="fill"></span><i class="h a" data-h="a"></i><i class="h b" data-h="b"></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
Wer die Verteilung sieht, wählt eine sinnvollere Spanne. Auf einem Gebrauchtwagenportal zeigen die Balken zum Beispiel, wo sich die meisten Autos nach Kilometerstand oder Preis ballen. So stellt niemand einen Bereich ein, in dem nichts zu finden ist. Ferienportale und Flugsuchen nutzen dasselbe Prinzip. Bekannt als Histogramm-Slider.
Die Balken helfen nur, wenn sie aus echten Daten stammen, erfundene Kurven führen in die Irre. Zwanzig bis dreißig Balken lassen sich gut lesen. Auf schmalen Handys lohnt es sich, das Histogramm etwas niedriger zu machen, damit die Regler gut greifbar bleiben.