tape measure JS

tape_measure_js.js

/* click and drag */
new Draggable('tape_measure_drag', { constraint: 'horizontal', handle: 'tape_measure_drag', 
        onDrag: function(e) {
                var offset = $('tape_measure_drag').positionedOffset().left;
                var value = ((offset-140)/80)*-1;
                value = (Math.round(value * 4) / 4).toFixed(2);

                if(value > 0) {
                        $('measurementInput').value = value;
                }
        },
        snap: function(y) {
                return [(y < 140) ? (y > -6260 ? y : -6260) : 140 ];
        } 
});

/* input box interaction */
$('measurementInput').observe('keyup', function(e) {
        $('tape_measure_drag').style.transition = 'left .5s ease 0s';
        var offset = $('tape_measure_drag').positionedOffset().left;
        var value = this.value;
        value = (Math.round(value * 4) / 4).toFixed(2);

        offset = -1*((value*80)-140);

        $('tape_measure_drag').style.left = (offset)+"px";

});