Faders de prioridades
Cuatro faders de mesa de mezclas con vúmetro de LED que deciden cuánto pesa cada criterio al ordenar los resultados.
Ajustes
Código
<fieldset class="uvq05-mx"><legend>¿Qué pesa más?</legend><div class="ch"><div class="c" style="--v:0.6"><div class="sc"><span class="ld" aria-hidden="true"></span><span class="tr"><input type="range" min="0" max="100" value="60" aria-label="Precio"></span></div><output>60</output><span class="nm" aria-hidden="true">Precio</span></div><div class="c" style="--v:0.35"><div class="sc"><span class="ld" aria-hidden="true"></span><span class="tr"><input type="range" min="0" max="100" value="35" aria-label="Distancia"></span></div><output>35</output><span class="nm" aria-hidden="true">Distancia</span></div><div class="c" style="--v:0.8"><div class="sc"><span class="ld" aria-hidden="true"></span><span class="tr"><input type="range" min="0" max="100" value="80" aria-label="Valoración"></span></div><output>80</output><span class="nm" aria-hidden="true">Valoración</span></div><div class="c" style="--v:0.45"><div class="sc"><span class="ld" aria-hidden="true"></span><span class="tr"><input type="range" min="0" max="100" value="45" aria-label="Silencio"></span></div><output>45</output><span class="nm" aria-hidden="true">Silencio</span></div></div><p class="tp"><span>Prioridad:</span> <b>Valoración</b></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
En lugar de un único menú de orden, este filtro deja equilibrar varios criterios a la vez, como un técnico de sonido equilibra canales. Cada fader es un input range nativo girado en vertical, con un vúmetro de LED por segmentos y una tira de cinta para el nombre. Va bien en buscadores de hoteles, alquileres o productos donde importan precio, distancia y valoración.
Ajusta los colores del vúmetro con los dos controles de color, por ejemplo de verde a ámbar, y cambia los canales en el código. Muestra el criterio que manda junto a los resultados para que se entienda por qué cambia el orden.