A function of a slider value suitable for zooming

Question

I'm using the jquery ui slider for zooming. It's supposed to zoom from 25% to %500, and about half of the range is used for the first %100 of the size.

The slider has values from 1 to 100. I need some function that can be used to calculate zooming based on the slider value, e.g.

function getZoom(sliderVal) {
    //return number from 25 to 500
}

Any suggestions?

Answer 1

Basically you want to rescale something from 1-100 to 25-500.

100-1 = 99
500-25 = 475

so that's your scaling factor - every point of difference on your slider is 475/99 points of difference on the zoom.

And the fixed offset is just 1 and 25, giving you a simple formula of:

f( slider_value ) =
    ( slider_value - 1 ) * ( 475 / 99 ) + 25

Of course, if you want to generalize, two scales from (a,b) to (c,d):

 f( slider_value ) =
     ( slider_value - a ) * ( ( d - c ) / ( b - a ) ) + c

Now, if you want to do some kind of half-half thing, you can just use the above formula to divide the portions you want, and call different functions varying on the slider's value. As long as they are continuous (the values are the same for the border cases) it should feel fine.

For your case, try mapping 1-50.5 to 25%-100%, 50.5-100 to 100%-500%.

Answer 2

I think it's better for the user if you provide exponential fitting.

Javascript has Math.pow(a,b) which calculates a^b.

The setting makes more sense if you map range [0,100] to [25%,400%], because then 50 is at the exact midpoint and can be made easily to map too 100%. 50 points on the slider then correspond to division or multiplication by four, so you can set

scaling = Math.pow(2,(slider - 50) / 25);

So then you get the mapping below:

slider     scaling
------------------
     0     2**-2 = 1/4 =  25%
    25     2**-1 = 1/2 =  50%
    50     2**0  = 1   = 100%
    75     2**1  = 2   = 200%
   100     2**2  = 4   = 400%

Now I see that this doesn't answer your question completely because your scale is [1,100] instead of [0,100], and you want to reach 500% instead of 400%.

To get there, you can first normalize the slider:

slider_n = (slider - 1) * (100/99);

(this maps [1,100] to [0,100]), and then, if you want, multiply positive values of the exponent by (log 5)/(log 4) so that your scale ends at 500%, i.e.

exp = (slider_n - 50) / 25.0;
if (exp > 0) exp = exp * Math.log(5)/Math.log(4);
scaling = Math.pow(2,exp);