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. Basically - I have a jQuery UI slider to select a height. It increments in inches and has a min

Solution 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:

functionanimateRulerOffset(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.

Solution 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;