Price slider with bubbles
Two handles with little value bubbles, a highlighted stretch between them and the range shown above.
Settings
Code
<div class="uv-frp"><div class="hd"><span>Price</span><b class="out">40 € – 160 €</b></div><div class="tk"><span class="fill"></span><i class="h a" data-h="a"><em>40 €</em></i><i class="h b" data-h="b"><em>160 €</em></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
The price filter of an online furniture shop is the obvious home for it: drag the left handle to skip the cheapest pieces, the right one to stay on budget. A bubble shows the exact figure while you drag. If you searched for a dual range slider or a price filter in HTML and CSS, this is it.
Round the values to steps that make sense for your prices, like tens of euros, rather than showing 43 or 127. Set the maximum near your most expensive product, not at a random high number, or the useful part of the track gets squeezed.