jQuery UI滑块与缩放标尺作为高度选择器

Question

我想解决这种棘手的输入高度选择器的数学。

基本上 - 我有一个jQuery UI滑块来选择一个高度。它以英寸为单位递增，最小值为0，最大值为120（10'高）。

随着用户移动滑块，相应的标尺图形移动。

我已经设置了与我有什么迄今为止这里的jsfiddle： http://jsfiddle.net/x57Rw/

你可以看到我的数学是有点过那里。我知道我需要缩放统治者图形的偏移量，但不能完全包围它。基本上寻找我需要调整以使标尺与滑块输入匹配（相当）正确。它不一定非常确切，但尽可能接近。任何帮助将不胜感激！

Answer 1

你的滑块需要被放倒有点用保证金与统治者的像这样的底部对齐：

你应该通过144实际上被分割，而不是120作为你的统治者形象包含144英寸，并且您的滑块应被设置为144最大以及：

function animateRulerOffset(sliderValue) { 
    pixelOffset = 622-((sliderValue*622)/144); 
    ... 
} 

如果你真的想只有120英寸，那么你的标尺图像需要修改在10英尺到结束。

Answer 2

见http://jsfiddle.net/x57Rw/14/

标尺的高度为744px，它有12' 个。

最大值为10'，所以我们必须删除2' - > 744 * 2/12 px（好吧，我们将它们相加，因为之后我们乘以-1）。

然后，我们需要一个百分比。最大值为120，所以1-sliderValue/120（好吧，它是一个一个，不是百分比）。

此百分比乘以标尺的高度减标尺容器的高度。但我们删除了744 * 2/12px，所以我们也必须在这里添加它（好吧，因为之后我们乘以-1）：

pixelOffset = (744-112-744*2/12)*(1-sliderValue/120)+744*2/12;