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

我正试图在高度选择器的这种棘手的输入上计算出数学。

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

当用户移动滑块时，相应的标尺图形移动。

我已经在这里建立了一个jsfiddle： http ： //jsfiddle.net/x57Rw/

你可以看到我的数学有点偏僻。 我知道我需要缩放标尺图形的偏移量，但不能完全绕过它。 基本上寻找我需要调整的东西，以使标尺与滑块输入正确匹配（相当）。 它不必完全准确，但尽可能接近。 任何帮助将不胜感激！

Answer 1

您的滑块需要稍微降低一点，以便与标尺的底部对齐，如下所示：

#height-slider.ui-slider-vertical .ui-slider-handle { left: -.8em; margin-bottom: -16px; ... } 

你应该除以144而不是120，因为你的标尺图像实际上包含144英寸，你的滑块也应该被设置为最大144：

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

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

Answer 2

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

标尺的高度为744像素，它有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;