Untitled

dabblet.css

html,body { height:100%;}
body {
  display: flex;
  justify-content: center;
  align-items: center;
}

.rect {
  position: relative;
  width: 20em;
  height: 5em;
  border: 2px solid;
}

svg {
  width: 100%;
  height: 100%;
}

.controler {
  position: absolute;
  bottom: -5em;
  left: 50%;
  transform: translate(-50%,0);
}

dabblet.html

<div class="rect">
<svg>
<g stroke="#f20">
<line x1="0" y1="0" x2="100%" y2="100%" stroke-width="1"/>
</g>
</svg>

<div class="controler">
w: <input type="range" id="w-range">
<br>h: <input type="range" id="h-range">
</div>
</div>

dabblet.js

var div = document.querySelector('div');
var w = parseInt(getComputedStyle(div, null).getPropertyCSSValue('width').cssText, 10);
var h = parseInt(getComputedStyle(div, null).getPropertyCSSValue('height').cssText, 10);

document.querySelector('#w-range').addEventListener('change', function() {
  div.style.width = w * (1 + this.value/100) + 'px'; 
}, false);

document.querySelector('#h-range').addEventListener('change', function() {
  div.style.height = h * (1 + this.value/100) + 'px'; 
}, false);

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"result"}