JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://campquiet.com/jsfiddle/jquery-ui.css">
<div id="height" class="input-block">
  <h2>My height is:</h2>
  <div id="height-select">
    <div id="height-slider"></div>
    <div id="ruler-container">
      <div id="ruler"></div>
    </div>
    <input id="height-text" type="text" name="height" value="0' 0" />
  </div>
</div>

CSS

#height {
    width: 243px;
    margin: 0 22px 0 10px;
    background: url('../images/inputs-sprite.png') transparent no-repeat -468px 40px;
}
    #height-select {
        position: relative;
    }    
        #height-slider {
            float: left;
            height: 112px;
            margin: 0 5px 0 0;
            background: #F9DC45;
            width: 6px;
        }
            #height-slider.ui-slider-vertical .ui-slider-handle {
                left: -.8em;
                background: url('http://www.campquiet.com/jsfiddle/height-slider-arrow.png') no-repeat transparent 0 0;
                width: 48px;
                height: 34px;
                border: 0;
                outline: 0;
                cursor: pointer;
            }
        #height-select label {
            position: absolute;
            top: 145px;
        }
        #height-select input[type="text"] {
            border: 0;
            outline: 0;
            width: 60px;
            height: 25px;
            line-height: 25px;
            font-size: 22px;
            color: #1c506b;
            position: absolute;
            left: 125px;
            top: 64px;
            background: transparent;
            text-align: center;
        }
        #ruler-container {
            width: 84px;
            height: 112px;
            overflow: hidden;
            border: 1px solid #111;
            position: relative;
        }
            #ruler {
                width: 84px;
                height: 744px;
                top: -622px;
                background: url('http://www.campquiet.com/jsfiddle/ruler-bg-numbered.png') repeat-y transparent 0 bottom;
                position: absolute;
            }

JavaScript

$("#height-slider").slider({
            orientation: "vertical",
            value: 1,
            step: 1,
            min: 0,
            max: 120,
            start: function( event, ui ) {
                startPoint = ui.value;
            },
            slide: function( event, ui ) {
                // change input
                display_feet =  Math.floor(ui.value/12);
                display_inches = Math.round(((ui.value/12) - display_feet) * 12);
                $( "#height-text" ).val( display_feet + "' " + display_inches + '"' );

                // animate ruler
                currTop = $('#ruler').css("top");
                
                if( startPoint > ui.value )
                {
                    startPoint = ui.value;
                }
                else
                {
                    startPoint = ui.value;
                }
                animateRulerOffset(ui.value);
            }
    });
function animateRulerOffset(sliderValue) {
    console.log(sliderValue);
    pixelOffset = (744-112-744*2/12)*(1-sliderValue/120)+744*2/12;
    $('#ruler').animate({
        top: '-'+pixelOffset
    }, 0);
}