HTML + CSSFiltros
Radio de distancia en el mapa
Un deslizador que agranda un círculo de radar alrededor de tu ubicación en un minimapa al subir la distancia.
Ajustes
16px
1x
25km
Código
<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>Distancia máxima</span><output><b>10</b> km</output></span><input type="range" min="1" max="25" value="10"></label></div>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Filtros
Ver todos: FiltrosDónde usarlo
El radio de búsqueda se entiende mejor en un mapa que como número. Este filtro dibuja un pequeño mapa de ciudad con calles, un parque y un lago, pone una chincheta en el centro y la rodea con un círculo que crece al arrastrar el deslizador. Un barrido de radar suave gira dentro del círculo para que la zona parezca viva.
El máximo se ajusta con el control extra. El input range es nativo y lleva etiqueta, la salida muestra el valor en kilómetros y el mapa son degradados CSS, sin imágenes ni APIs de mapas.