javascript - 带有缩放标尺作为高度选择器的 jQuery UI slider

Question

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

基本上 - 我有一个 jQuery UI slider 来选择高度。它以英寸为单位递增，最小值为 0，最大值为 120(10 英尺高)。

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

我已经用我目前所拥有的设置了一个 jsfiddle: http://jsfiddle.net/x57Rw/

你可以看到我的数学有点不对劲。我知道我需要缩放标尺图形的偏移量，但无法完全理解它。基本上是寻找我需要调整的内容，以使标尺与 slider 输入(相当)正确匹配。它不必完全准确，但尽可能接近。任何帮助将不胜感激!

Answer 1

您的 slider 需要稍微向下移动一点，以便与标尺的底部对齐，如下所示:

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

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

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

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