Slider circulaire
Un cadran rond qu’on fait glisser autour du centre, avec la valeur affichée en grand au milieu.
Réglages
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 pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Filtres
Où l’utiliser
Un cadran va bien pour une distance ou une intensité. Un site d’emploi local qui demande jusqu’où vous iriez, une appli de rencontre qui règle le rayon de recherche en kilomètres ou le panneau d’un thermostat connecté. Il prend moins de largeur qu’un slider droit et attire l’œil sur l’écran de filtres. Certains l’appellent slider radial ou circulaire.
Un cadran est moins précis, réservez-le donc aux valeurs approximatives. Sur mobile, donnez à l’anneau une bonne taille, au moins la largeur d’un pouce. Si une valeur exacte est nécessaire, ajoutez un champ de saisie à côté.