Slider circular
Un dial redondo que arrastras alrededor del centro, con el valor bien grande en medio.
Ajustes
Código
<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 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
Dónde usarlo
Un dial encaja con distancias o intensidades. Un portal de empleo local que pregunta hasta dónde te desplazarías, una app de citas que fija el radio de búsqueda en kilómetros o el panel de un termostato inteligente. Ocupa menos ancho que un slider recto y llama la atención en la pantalla de filtros. Lo llaman slider circular o radial.
Con un dial cuesta ser preciso, así que úsalo para valores aproximados. En el móvil, dale al anillo un tamaño generoso, por lo menos el ancho de un pulgar. Si hace falta un número exacto, pon también un campo para escribirlo.