javascript - jQuery UI滑块，带有标尺作为高度选择器

我正在尝试针对高度选择器的这种棘手输入进行数学计算。

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

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

我已经在这里设置了一个jsfiddle：
http://jsfiddle.net/x57Rw/

您可以看到我的数学有点离题。我知道我需要缩放标尺图形的偏移量，但是不能完全围绕它。基本上是在寻找我需要调整以使标尺与滑块输入正确（公平）匹配的内容。它不必完全精确，但应尽可能接近。任何帮助将不胜感激！

最佳答案

您需要将滑子稍微下移一点以与标尺的底部对齐，如下所示：

        #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英尺处结束。