AIMRAN
Distribución20 – 80
HTML + CSSFiltres

Slider de plage avec histogramme

Des barres au-dessus du slider montrent la répartition des résultats ; celles hors de votre plage s’éteignent.

Réglages

16px
1x

Code

<div class="uv-frh"><div class="hd"><span>Répartition</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 pour l’IA

Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.

Plus dans Filtres

Chips de filtre

FiltresReact + Motion

Contrôle segmenté

FiltresReact + Motion

Liste déroulante multiple

FiltresReact + Motion

Chips à pastille glissante

FiltresHTML + CSS

Chips remplis depuis le centre

FiltresHTML + CSS

Chips à bordure dégradée

FiltresHTML + CSS

Chips avec coche

FiltresHTML + CSS

Chips avec croix pour retirer

FiltresHTML + CSS

Où l’utiliser

Voir la répartition aide à choisir une plage sensée. Sur un site de voitures d’occasion, les barres montrent où se concentrent la plupart des annonces selon le kilométrage ou le prix, et personne ne se retrouve avec une plage vide. Les sites de location et de vols font la même chose. Le nom qui revient le plus : slider avec histogramme.

Les barres n’aident que si elles viennent de vos vraies données ; une courbe inventée trompe. Entre vingt et trente barres, la lecture reste facile. Sur un téléphone étroit, réduisez un peu la hauteur de l’histogramme pour que les poignées restent faciles à attraper.