Priority mixer faders
Four mixing desk faders with LED meters that set how much each criterion weighs when results are sorted.
Settings
Code
<fieldset class="uvq05-mx"><legend>What matters most?</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="Price"></span></div><output>60</output><span class="nm" aria-hidden="true">Price</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="Distance"></span></div><output>35</output><span class="nm" aria-hidden="true">Distance</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="Rating"></span></div><output>80</output><span class="nm" aria-hidden="true">Rating</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="Quiet"></span></div><output>45</output><span class="nm" aria-hidden="true">Quiet</span></div></div><p class="tp"><span>Priority:</span> <b>Rating</b></p></fieldset>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
See all FiltersWhere to use it
Instead of a single sort menu, this filter lets people balance several criteria at once, the way a sound engineer balances channels. Each fader is a native range input turned on its side, with a segmented LED meter and a paper scribble strip for the name. It suits hotel, rental or product search where price, distance and rating all matter.
Set the meter colours with the two colour controls, for example from green to amber, and rename the channels in the code. Show the leading criterion next to the results so people see why the order changed after each move.