Ein Power-Curve-Slider für Preisfilter von €0 bis €50 Mio.

Ein B2B-Marktplatz brauchte einen Preisfilter über fünf Größenordnungen, von wenigen hundert Euro bis über 50 Millionen. Der eingebaute lineare Slider war praktisch unbrauchbar: 99% des Tracks gehörten dem oberen Bereich, und in den gängigsten Preisklassen war eine gezielte Auswahl so gut wie unmöglich.

99 % des Slider-Tracks gehörten dem oberen Bereich. In den gängigsten Preisklassen war die Auswahl reines Glücksspiel.

Bildet eine Slider-Position (0 bis Resolution) über die Potenzkurve auf einen realen Wert ab:

const toLogValue = (position, maxValue, resolution, steepness) => {
  if (position === 0) return 0;
  const normalized = position / resolution;
  return Math.round(Math.pow(normalized, steepness) * maxValue);
};

Interaktive Demo

Kurvenparameter ändern und die Auswirkung in Echtzeit beobachten, inklusive Steepness-Vergleich und Schrittweiten-Visualisierung.

Die Slider-Position (0 bis Resolution) wird auf 0-1 normalisiert und dann mit dem Steepness-Exponenten potenziert. Das ergibt feine Kontrolle am unteren Ende und zunehmend größere Sprünge nach oben. Bei Steepness 5 bildet die erste Hälfte des Sliders nur rund 3 % des Wertebereichs ab, die letzten 10 % decken etwa 40 % ab. roundToNiceStep() rundet die Werte anschließend auf saubere, gut lesbare Zahlen.

Die Umkehrung: Aus einem realen Wert die passende Slider-Position berechnen:

const toSliderPosition = (value, maxValue, resolution, steepness) => {
  if (value === 0) return 0;
  const normalized = Math.pow(value / maxValue, 1 / steepness);
  return normalized * resolution;
};

Rundet Rohwerte auf gut lesbare Zahlen, die mit der Größenordnung skalieren:

const roundToNiceStep = (num) => {
  if (num === 0) return 0;
  const magnitude = Math.floor(Math.log10(num));
  const step = Math.pow(10, magnitude) / 20;
  return Math.round(num / step) * step;
};

FAQ

TECHNOLOGIE-STACK