This is entirely up to you. The actual input range wll be linear but how your code interprets the value it gets back is in your control.

So set the range on the input to min 0 and max 100. But when you get the value in Javascript you interpret it as you wish.

The simplest curve you can fit to the values (x1, y1), (x2, y2), (x3, y3) is a parabola: y1 = ax1x1 + b*x1 + c; and so on

Solving these three simultaneous equations for your points (0, 0), (50, 20), (100, 100) we get: a=3/250; b=-0.2; c=0;

function getValue(v) {
  document.querySelector('#value').innerHTML = 3 / 250 * v * v - 0.2 * v;
}
getValue(document.querySelector('input').value);

<input type="range" min=0 max=100 onchange="getValue(this.value);">
<div>The calculated value is <span id="value"></span></div>