HTML + CSSFiltros
Nivel de picante con guindillas
Cinco guindillas que se encienden de amarillo a rojo oscuro para marcar cuánto picante aguantas.
Ajustes
16px
1x
Código
<fieldset class="uvq05-ch"><legend>Picante máximo</legend><div class="row"><label style="--h:#f7c548"><input type="radio" name="uvq05-ch" aria-label="Suave"><svg viewBox="0 0 24 40" aria-hidden="true"><path d="M12 9c0-3 1.5-5.5 4.5-6.5" fill="none" stroke="#3f8f3a" stroke-width="2.2" stroke-linecap="round"/><path d="M7.5 10.5c1.5-2 7.5-2 9 0l-.5 2.5h-8z" fill="#4caf50"/><path class="bd" d="M7.8 12.5h8.4c1.2 7.5-.2 15-3.2 21.5-1.2 2.6-3.6 3.3-4.6 1.4 2.4-5.4 1.6-13.8-.6-22.9z"/><path d="M10.2 15c.6 4 .7 8.4-.3 12.6" fill="none" stroke="#fff" stroke-opacity=".45" stroke-width="1.4" stroke-linecap="round"/></svg></label><label style="--h:#f59e0b"><input type="radio" name="uvq05-ch" aria-label="Medio"><svg viewBox="0 0 24 40" aria-hidden="true"><path d="M12 9c0-3 1.5-5.5 4.5-6.5" fill="none" stroke="#3f8f3a" stroke-width="2.2" stroke-linecap="round"/><path d="M7.5 10.5c1.5-2 7.5-2 9 0l-.5 2.5h-8z" fill="#4caf50"/><path class="bd" d="M7.8 12.5h8.4c1.2 7.5-.2 15-3.2 21.5-1.2 2.6-3.6 3.3-4.6 1.4 2.4-5.4 1.6-13.8-.6-22.9z"/><path d="M10.2 15c.6 4 .7 8.4-.3 12.6" fill="none" stroke="#fff" stroke-opacity=".45" stroke-width="1.4" stroke-linecap="round"/></svg></label><label style="--h:#f06b1f"><input type="radio" name="uvq05-ch" aria-label="Picante" checked><svg viewBox="0 0 24 40" aria-hidden="true"><path d="M12 9c0-3 1.5-5.5 4.5-6.5" fill="none" stroke="#3f8f3a" stroke-width="2.2" stroke-linecap="round"/><path d="M7.5 10.5c1.5-2 7.5-2 9 0l-.5 2.5h-8z" fill="#4caf50"/><path class="bd" d="M7.8 12.5h8.4c1.2 7.5-.2 15-3.2 21.5-1.2 2.6-3.6 3.3-4.6 1.4 2.4-5.4 1.6-13.8-.6-22.9z"/><path d="M10.2 15c.6 4 .7 8.4-.3 12.6" fill="none" stroke="#fff" stroke-opacity=".45" stroke-width="1.4" stroke-linecap="round"/></svg></label><label style="--h:var(--c1)"><input type="radio" name="uvq05-ch" aria-label="Muy picante"><svg viewBox="0 0 24 40" aria-hidden="true"><path d="M12 9c0-3 1.5-5.5 4.5-6.5" fill="none" stroke="#3f8f3a" stroke-width="2.2" stroke-linecap="round"/><path d="M7.5 10.5c1.5-2 7.5-2 9 0l-.5 2.5h-8z" fill="#4caf50"/><path class="bd" d="M7.8 12.5h8.4c1.2 7.5-.2 15-3.2 21.5-1.2 2.6-3.6 3.3-4.6 1.4 2.4-5.4 1.6-13.8-.6-22.9z"/><path d="M10.2 15c.6 4 .7 8.4-.3 12.6" fill="none" stroke="#fff" stroke-opacity=".45" stroke-width="1.4" stroke-linecap="round"/></svg></label><label style="--h:#a3121f"><input type="radio" name="uvq05-ch" aria-label="Fuego"><svg viewBox="0 0 24 40" aria-hidden="true"><path d="M12 9c0-3 1.5-5.5 4.5-6.5" fill="none" stroke="#3f8f3a" stroke-width="2.2" stroke-linecap="round"/><path d="M7.5 10.5c1.5-2 7.5-2 9 0l-.5 2.5h-8z" fill="#4caf50"/><path class="bd" d="M7.8 12.5h8.4c1.2 7.5-.2 15-3.2 21.5-1.2 2.6-3.6 3.3-4.6 1.4 2.4-5.4 1.6-13.8-.6-22.9z"/><path d="M10.2 15c.6 4 .7 8.4-.3 12.6" fill="none" stroke="#fff" stroke-opacity=".45" stroke-width="1.4" stroke-linecap="round"/></svg></label></div><div class="bar" aria-hidden="true"><i></i></div><p class="lv" aria-hidden="true"><span>Suave</span><span>Medio</span><span>Picante</span><span>Muy picante</span><span>Fuego</span></p></fieldset>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
Un filtro tipo valoración para cartas y reparto de comida donde la escala es el picante y no las estrellas. Cada guindilla es un SVG en línea con su color en una variable CSS, el grupo de radios rellena todas hasta la elegida y una barra degradada y una palabra confirman el nivel. En el máximo, las guindillas brillan.
El color principal marca la guindilla más picante y el secundario el inicio de la barra, así que puedes ir de verde suave a rojo intenso. Renombra los niveles según tu cocina o usa el mismo patrón con otros iconos para dulzor o graduación.