Rango con histograma
Barras sobre el slider muestran cómo se reparten los resultados y las que quedan fuera de tu rango se apagan.
Ajustes
Código
<div class="uv-frh"><div class="hd"><span>Distribución</span><b class="out">20 – 80</b></div><div class="bars"><span style="height:20%"></span><span style="height:22%"></span><span style="height:24%"></span><span style="height:27%"></span><span style="height:32%"></span><span style="height:38%"></span><span style="height:44%"></span><span style="height:53%"></span><span style="height:61%"></span><span style="height:70%"></span><span style="height:78%"></span><span style="height:84%"></span><span style="height:89%"></span><span style="height:90%"></span><span style="height:89%"></span><span style="height:84%"></span><span style="height:78%"></span><span style="height:70%"></span><span style="height:61%"></span><span style="height:53%"></span><span style="height:44%"></span><span style="height:38%"></span><span style="height:32%"></span><span style="height:27%"></span><span style="height:24%"></span><span style="height:22%"></span><span style="height:20%"></span><span style="height:19%"></span></div><div class="tk"><span class="fill"></span><i class="h a" data-h="a"></i><i class="h b" data-h="b"></i></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
Ver cómo se reparten los datos ayuda a elegir un rango con sentido. En un portal de coches de segunda mano, por ejemplo, las barras enseñan dónde se concentran los coches por kilómetros o precio, y nadie acaba con un rango vacío. Webs de alquiler y buscadores de vuelos hacen lo mismo. Se conoce como slider de rango con histograma.
Las barras solo sirven si salen de tus datos reales; una forma inventada confunde. Entre veinte y treinta barras se leen bien. En móviles estrechos, baja un poco la altura del histograma para que los tiradores sigan siendo fáciles de coger.