Transform slider linear values to exponent

Question

I have a slider:

min val. = 0
max val. = 20'000
step = 0.1

min, max values and step are constants. On each step (i.e. thumb position change) slider returns a current value and a thumb position in %.

How can I transform the current returned value to make it grow exponentially like on the 2nd graphic - where 0 - 8'000 - take 80% of slider width.

Red graphic:

On each step (thumb position change) slider returns a current value and a thumb position in % - current value grows linearly depending on the thumb position.

Green graphic:

This is what I need. I can only use current thumb position and current slider value as a function arguments.

Answer 1

You could use an easing function.

• Easing formulas: http://easings.net/
• Description: What is an easing function?

// formula     http://easings.net/
// description https://stackoverflow.com/questions/8316882/what-is-an-easing-function
// x: percent
// t: current time,
// b: beginning value,
// c: change in value,
// d: duration

function easeOutQuart(x, t, b, c, d) {
    return -c * ((t = t / d - 1) * t * t * t - 1) + b;
}

var i;
for (i = 0; i <= 20000; i += 1000) {
    console.log(i, i * 100 / 20000, easeOutQuart(null, i * 100 / 20000, 0, 100, 100));
}

.as-console-wrapper { max-height: 100% !important; top: 0; }