Prioritäten-Mischpult
Vier Mischpult-Fader mit LED-Anzeige legen fest, wie stark jedes Kriterium beim Sortieren der Ergebnisse zählt.
Einstellungen
Code
<fieldset class="uvq05-mx"><legend>Was zählt am meisten?</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="Preis"></span></div><output>60</output><span class="nm" aria-hidden="true">Preis</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="Entfernung"></span></div><output>35</output><span class="nm" aria-hidden="true">Entfernung</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="Bewertung"></span></div><output>80</output><span class="nm" aria-hidden="true">Bewertung</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="Ruhe"></span></div><output>45</output><span class="nm" aria-hidden="true">Ruhe</span></div></div><p class="tp"><span>Priorität:</span> <b>Bewertung</b></p></fieldset>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Filter
Alle ansehen: FilterWofür du ihn nutzen kannst
Statt eines einzelnen Sortiermenüs lassen sich hier mehrere Kriterien gleichzeitig gewichten, so wie ein Toningenieur Kanäle abmischt. Jeder Fader ist ein nativer Range-Input, um neunzig Grad gedreht, mit segmentierter LED-Anzeige und einem Klebestreifen als Beschriftung. Das passt zu Hotel-, Miet- oder Produktsuchen, bei denen Preis, Entfernung und Bewertung zusammen zählen.
Die beiden Farbregler bestimmen den Verlauf der Anzeige, etwa von Grün nach Bernstein, die Kanäle benennst du im Code um. Zeig das führende Kriterium neben den Treffern, damit klar ist, warum sich die Reihenfolge ändert.