Filtros
HTML + CSSFiltros
Filtros con contador de resultados
Al activar o quitar filtros, el número del botón cuenta hacia arriba o hacia abajo hasta el total nuevo.
Ajustes
16px
1x
Código
<div class="uv-frc"><p class="ti">Filtros</p><label><span>Envío gratis</span><input type="checkbox" role="switch" data-f="0.62"><i aria-hidden="true"></i></label><label><span>En oferta</span><input type="checkbox" role="switch" data-f="0.35"><i aria-hidden="true"></i></label><label><span>Valoración de 4 o más</span><input type="checkbox" role="switch" data-f="0.7"><i aria-hidden="true"></i></label><label><span>Novedades</span><input type="checkbox" role="switch" data-f="0.28"><i aria-hidden="true"></i></label><button type="button"><span>Ver</span> <b>1.248</b> <span>resultados</span></button></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
Los paneles de filtros en el móvil suelen terminar con un botón para aplicarlos, y poner en él el número de resultados avisa de si te estás pasando filtrando antes de pulsar. Cada interruptor multiplica el total por un factor, y la cifra del botón rueda hasta el valor nuevo con una frenada suave, así que el cambio se sigue con facilidad.
El contador usa el idioma de la página para los separadores de miles. Sustituye los factores por una llamada a tu API; los interruptores siguen siendo checkboxes nativos.