Kreisförmiger Slider
Ein runder Regler, den man um die Mitte zieht, mit dem Wert groß im Zentrum.
Einstellungen
Code
<div class="uv-frc"><svg viewBox="0 0 120 120"><circle class="bg" cx="60" cy="60" r="50"/><circle class="pg" cx="60" cy="60" r="50"/></svg><div class="ct"><b class="out">60</b><span>km</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
Ein Drehregler passt gut zu Entfernungen oder Intensitäten. Eine regionale Jobbörse, die fragt, wie weit du pendeln willst, eine Dating-App mit Suchradius in Kilometern oder ein Smart-Home-Panel für die Heizung. Er braucht weniger Breite als ein gerader Slider und wird zum Blickfang im Filterbereich. Oft gesucht als Circular Slider oder runder Range-Slider.
Mit einem Drehregler ist präzises Einstellen schwerer, nutze ihn also für grobe Werte. Auf dem Handy braucht der Ring genug Größe, mindestens eine Daumenbreite. Wenn eine exakte Zahl nötig ist, biete zusätzlich ein Eingabefeld an.