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

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);