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

Question

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

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.

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!

Answer 1

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;
            ...
        } 

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);
    ...
}

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

Answer 2

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

Ruler's height is 744px, and it has 12'.

The max is 10', so we have to remove 2'->744*2/12 px (well, we add them because after that we multiply for -1).

Then, we need a percentage. The max is 120, so 1-sliderValue/120 (well, it's a per one, not percentage).

This percentage multiplies ruler's height minus ruler container's height. But we removed 744*2/12px, so we have to add it here too (well, its subtraction because after that we multiply for -1):

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