Back to Homepage

DK, Back to homeDaniel Kurdoghlian

Get In TouchGet In Touch
Back to Portfolio
Services

Frontend Development, UX Engineering

Industry

B2B Marketplace

Year

2024

A price slider that reaches both €500 and €50 million.

On the marketplace's price filter, 99 % of the slider track belonged to the top of the range. Listings span five orders of magnitude, from a few hundred euros to €50 million, and most of them sit below €500k. Buyers could not land on the prices that mattered, so they ignored the filter.

THE CHALLENGE

Ten pixels for most of the market

The built-in slider mapped its 1,000 px track linearly onto €0 to €50 million. The €0 to €500k bracket, where most listings sit, got roughly 10 pixels. A buyer looking for offices under €300k could not land on that value even when trying, and the support inbox filled with tickets about "the slider not working". The client ruled out the usual escape hatches: no second field for typing a number, no split into several sliders. One track, the full range, and it had to feel natural at both ends.

THE SOLUTION

A power curve with one tunable number

The obvious fix is a logarithmic scale, and I rejected it: a log scale has one fixed shape. It always compresses the upper range the same way and gives no control over how much of the track the low end gets. A power curve does the same job with one knob. The slider position is normalised to 0 to 1 and raised to a steepness exponent before it is multiplied by the maximum. At steepness 5 the lower half of the track covers about 3 % of the range and the last 10 % of the track covers about 40 %. The trade-off is coarse steps near the top, where one step moves the value by hundreds of thousands of euros. That is where precision matters least. The raw output still looked broken, with values like €387,422, so a second function rounds every reading to a step that grows with its magnitude.

Position to value and back. The inverse is what places the thumb correctly for a value that arrives from the URL:

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

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

// The exponent comes from the element, not from the code
const steepness = Number(slider.dataset.steepness ?? 5);

Try the curve

Drag the price thumb and compare the reading with what a linear slider would show at the same position. Then change the steepness: at 1 the curve is the diagonal, at 5 it is the production setting. The numbers below show how much of the track the €0 to €500k bracket gets.

€1,550,000
5

1 is the diagonal, a linear slider. 5 is the production setting. From 7 upwards the lower half of the track covers barely 1 % of the range.

Power curve
€1,550,000
Linear slider, same position
€25,000,000
Before rounding
€1,562,500
40% / 1%Track for €0 to €500k, curve / linear
3.1%Lower half of the track covers
€15,688One step at the thumb
€50,000Rounding step here

One twentieth of the value's order of magnitude as the rounding step, so €387,422 becomes €385,000 and €3,870 becomes €3,850:

TypeScript
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;
};
THE RESULT

Buyers who had given up on the filter came back

After the switch, people who had been skipping the price filter started using it, and overall filter usage went up noticeably. Tickets about the slider stopped arriving. The client got this without a second input field: the track looks and works like any other slider, only the mapping behind it changed. The whole implementation is under 30 lines with no measurable performance cost, and the product team can reshape the curve for any slider on the site without asking for a release.

FOR YOUR PROJECT

  • When it applies

    Whenever one slider covers more than two orders of magnitude and most records sit at the low end: prices, budgets, areas, distances. A linear track spends its pixels where the data is not.

  • What to check

    Where your listings actually sit on the range, and how many pixels that bracket gets. If most of your inventory shares a few percent of the track, users are guessing. Then look at the labels: a filter that displays €387,422 looks broken even when it works.

  • What it needs

    About 30 lines of TypeScript, no library and no backend change. The curve is one attribute per slider, so the product team can tune it without a release.

FAQ

TECHNOLOGY STACK

TypeScript
Django

We have enjoyed working with Daniel for 10 years now. We highly appreciate his fast response times around the clock and his all-round knowledge. Whether server configurations or programming, he always has the right solution.

Manuel Kasbarian - CEO, SophistiX

Follow in the footsteps of Manuel and bring your vision to life.

Get In TouchGet In Touch