<!DOCTYPE HTML>
<html>
<head>
<style>
#a,#b {
height: 100px;
}
#a {
background: #f00;
float: left;
width: 50%;
}
#b {
background: #0f0;
margin-left: 50%;
}
</style>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
<input id="size" type="range" min="0" max="100" value="50">
<script>
document.getElementById("size").onmousedown = function () {
this.onmousemove = function () {
document.getElementById("a").style.width = this.value + "%";
document.getElementById("b").style.marginLeft = this.value + "%";
};
};
</script>
</body>
</html>
Двигай ползунок
