Filtre de rayon sur carte

Un curseur qui agrandit un cercle radar autour de ta position sur une mini-carte quand la distance augmente.

Réglages

Couleur principale#0b84ff

Couleur secondaire#5ac8fa

Taille16px

Vitesse1x

Maximum25km

Texte

Code

index.html

<div class="uv-fds"><div class="map" aria-hidden="true"><i class="rd"></i><i class="ar"></i><i class="pn"></i></div><label class="sl"><span class="hd"><span>Distance maximale</span><output><b>10</b> km</output></span><input type="range" min="1" max="25" value="10"></label></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

Voir tout : Filtres

Chips de filtre

FiltresReact + Motion

Contrôle segmenté

FiltresReact + Motion

Liste déroulante multiple

FiltresReact + Motion

Chips à pastille glissante

FiltresHTML + CSS

Chips remplis depuis le centre

FiltresHTML + CSS

Chips à bordure dégradée

FiltresHTML + CSS

Chips avec coche

FiltresHTML + CSS

Chips avec croix pour retirer

FiltresHTML + CSS

Où l’utiliser

Un rayon de recherche se comprend mieux sur une carte qu'en chiffre. Ce filtre dessine un petit plan de ville avec rues, parc et lac, place une épingle au centre et l'entoure d'un cercle qui grandit quand on fait glisser le curseur. Un balayage radar tourne doucement à l'intérieur pour que la zone paraisse vivante.

Le maximum se règle avec le curseur supplémentaire. Le range est natif et étiqueté, la sortie affiche les kilomètres, et la carte est faite de dégradés CSS, sans image ni API.