Distribución20 – 80
HTML + CSSFilters
Range slider with histogram
Bars above the slider show how results are spread, and the ones outside your range fade out as you drag.
Settings
16px
1x
Code
<div class="uv-frh"><div class="hd"><span>Distribution</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 for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Filters
Where to use it
Showing the spread helps people choose a sensible range. On a used car marketplace, for example, the bars reveal where most cars sit by mileage or price, so buyers don't set a range with nothing in it. Rental sites and flight search use the same idea. It is often called a histogram range slider.
The bars only help if they come from your real data; made-up shapes mislead. Around twenty to thirty bars reads well. On narrow phones, reduce the histogram height a little so the handles stay easy to grab.