javascriptmatheasingeasing-functions

Transform slider linear values to exponent


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.

enter image description here


Solution

  • You could use 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; }