在jquery滑块的两侧设置margin-left缓冲区

Question

I'm using a jquery slider and my slider handle is pretty big. In order for it to be the way I want it has to have margin-left: -2px when it's at 0 (all the way to the left) and have margin-left: -32px when it's at 100 (all the way to the right).

I want to ease into the correct margin rather than setting it upruptly. It can be done using the slide event but I'm having a little trouble with the calculation:

$(...).slider({
     slide: function(event, ui){
         var newMarginLeft = ...calculation... (ui.value is 0-100)
         $(this).children(".ui-handle").css("marginLeft", newMarginLeft);
     }
});

Answer 1

You can use this function, which will generate numbers from 2 to 32 evenly:

function generateNum(num)
{
    return 2 + Math.floor(num * .30);
}

Than you will just add a negative onto it. Use like this:

$(...).slider({
     slide: function(event, ui){
         var newMarginLeft = "-" + generateNum(ui.value);
         $(this).children(".ui-handle").css("marginLeft", newMarginLeft + "px");
     }
})

jsFiddle here: http://jsfiddle.net/RWuR4/1/

You can also try using Math.round to round up: Here is a fiddle that uses Math.round, which makes 99 also return 32 (so it might be a bit more of what you want instead of Math.floor):

http://jsfiddle.net/RWuR4/2/