Ratio Calculator

by ethanpil

HTML

<h3>Original Dimensions</h3>
<label for="weight">Width</label>
<input type="number" id="w" value="1080">
    
    <label for="weight">Height</label>
<input type="number" id="h" value="720">
    
<hr>    

<label for="weight">Adjustment: <span id="p">100</span>%</label>
<input type="range" id="a" min="0" value="100" max="200" step="1">

<hr>  
        
<h3>New Dimensions</h3>
<label for="weight">Width</label>
<input type="number" id="w2" disabled>

<label for="weight">Height</label>
<input type="number" id="h2" disabled>

CSS

input[type="range"] { width: 100%; }

JavaScript

$(function(){

    $('#w2').val($('#w').val());
    $('#h2').val($('#h').val());
    
    $('#w, #h').change(function(){
    
        $('#a').val(100);
        $('#p').text('100');
        
        $('#w2').val($('#w').val());
        $('#h2').val($('#h').val());
        
    });
	
    $('#a').change(function(){
    	$('#p').text($(this).val());
        
        $('#w2').val( $('#w').val() * ($(this).val()/100) );
        $('#h2').val( $('#h').val() * ($(this).val()/100) );
        
    });

});