jQuery UI滑块，带有标尺作为高度选择器 [英] jQuery UI slider with scaled ruler as height selector

问题描述

我正在尝试针对高度选择器的这种复杂输入进行数学计算.

I'm trying to work out the math on this sort of tricky input for a height selector.

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

Basically - I have a jQuery UI slider to select a height. It increments in inches and has a min of 0 and a max of 120 (10' tall).

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

As the user moves the slider, a corresponding ruler graphic moves.

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

I've set up a jsfiddle with what I have thus far here: http://jsfiddle.net/x57Rw/

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

You can see my math is a bit off there. I know I need to scale the offset of the ruler graphic, but can't quite wrap my head around it. Basically looking for what I need to adjust to get the ruler to match (fairly) correctly with the slider input. It doesn't have to be totally exact but as close as possible. Any help would be greatly appreciated!

推荐答案

您的滑块需要下移一点以与标尺的底部对齐，如下所示:

Your slider needs to be brought down a bit with a margin to align with the bottom of the ruler like so:

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

您应该将其除以144，而不是除以120，因为标尺图像实际上包含144英寸，并且滑块也应设置为最大值144:

And you should be dividing by 144, not by 120 as your ruler image actually contains 144 inches, and your slider should be set to a max of 144 as well:

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

如果您真的只想要120英寸，则需要将标尺图像修改为10英尺处结束.

If you truly want only 120 inches, then your ruler image needs to be revised to end at 10 feet.

这篇关于jQuery UI滑块，带有标尺作为高度选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！