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.