Javascript 在jquery滑块的两侧设置边距左侧缓冲区

我使用的是jquery滑块，我的滑块手柄相当大。为了让它成为我想要的方式，它必须在0（一直到左边）时具有

左边距：-2px

，在100（一直到右边）时具有

左边距：-32px

我想轻松地调整到正确的边距，而不是把它调高。可以使用幻灯片事件来完成，但我在计算时遇到了一些问题：

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

---

您可以使用此函数，该函数将均匀地生成从2到32的数字：

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

然后在上面加一个负片。这样使用：

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

请点击此处：

您还可以尝试使用Math.round进行取整：这里有一个使用Math.round的小提琴，它使99也返回32（因此它可能比Math.floor更符合您的需要）：

---

您可以使用此功能，它将均匀地生成2到32的数字：

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

然后在上面加一个负片。这样使用：

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

请点击此处：

您还可以尝试使用Math.round进行取整：这里有一个使用Math.round的小提琴，它使99也返回32（因此它可能比Math.floor更符合您的需要）：

---

更详细地解释。因此，您需要一个具体的计算，并以30个增量线性递增，当

ui.value=0

时，它应该返回

2

，而当

ui.value=100

时，它应该返回

32

，但是，在marginLeft中使用时，它需要在其上附加一个负值。任何数学家都应该直截了当地提出一个公式……更详细地解释一下。因此，你需要一个具体的计算，线性递增总共30个增量，当

ui.value=0

时，它应该返回

2

，而当

ui.value=100

时，它应该返回

32

，在marginLeft中使用时，需要在其上附加负值。对于任何数学家来说，都应该是直截了当的，为这个问题提出一个公式。。。