iorvgoqa,
в ie требуется правка. исправлено
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.rez {
width: 400px;
height: 300px;
border: 2px groove #000000;
position: relative;
padding: 0;
}
.rez span {
margin: 0;
position: absolute;
left 0;
top: 0;
background-color: #000000;
}
.rez span.v {
left: 200px;
width: 1px; height: 300px;
}
.rez:before{
position: absolute;
top: 15px;
left: 20px;
content: attr(data-a);
}
.rez:after{
position: absolute;
top: 15px;
right: 20px;
content: attr(data-b);
}
.rez span.g {
width: 200px; height:1px;
left: 200px; top : 150px;
}
.rez span.g:after{
position: absolute;
display: block;
top: 15px;
right: 20px;
content: attr(data-c);
z-index: 100;
}
</style>
<script>
window.addEventListener('DOMContentLoaded', function() {
var rez = document.querySelector('.rez'),
span = document.querySelectorAll('.rez span'),
range = document.querySelectorAll('input.v,input.g');
arr = [];
[].forEach.call(range, function(item, i) {
arr[i]= +item.value;
var foo = function() {
arr[i]= +item.value;
span[0].style.left = arr[0]+"px";
span[1].style.left = arr[0]+"px";
span[1].style.width = (400 - arr[0])+"px";
span[1].style.top = arr[1]+"px";
rez.setAttribute("data-a", arr[0] ? arr[0] + " x 300" : "");
rez.setAttribute("data-b", arr[0] != 400 && arr[1] ? (400 - arr[0]) + " x " + arr[1] : "");
span[1].setAttribute("data-c", arr[0] != 400 && arr[1] != 300 ?(400 - arr[0]) + " x " + (300 - arr[1]) : "");
}
item.addEventListener('change', foo);
item.addEventListener('input', foo);
});
});
</script>
</head>
<body>
<div class="rez" data-a="200 x 300" data-b="200 x 150" ><span class="v"></span><span class="g" data-c="200 x 150"></span></div>
<input type="range" min="0" max="400" step="10" value="200" class="v">
<input type="range" min="0" max="300" step="10" value="150" class="g">
</body>
</html>