index.html
<html>
<style>
html, body{
width:100%;
height:100%;
}
svg {
width: 960px;
height:500px;
}
#rangeX {
position: absolute;
top: 25px;
left: 25px;
width: 200px;
}
</style>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<body>
<input id='rangeX' type='range' min='0', max='1.0' step='any' value="0.5" list="exlist"/>
<datalist id="exlist">
<option value="1"></option>
<option value="0.75"></option>
<option value="0.5"></option>
<option value="0.25"></option>
<option value="0"></option>
</datalist>
<svg viewBox="0 0 960 500">
<def>
<g id="manIcon">
<path d="M197,476c0,14,6.833,21,20.5,21s20.5-7,20.5-21V282h21v194c0,14,6.833,21,20.5,21s20.5-7,20.5-21
V149h10v121c0,7.334,2.5,12.667,7.5,16s10.167,3.333,15.5,0s8-8.667,8-16V145c0-14-4.667-25.5-14-34.5S305,97,289,97h-81
c-15.333,0-27.833,4.333-37.5,13S156,130,156,144v127c0,6.667,2.667,11.333,8,14c5.333,2.667,10.5,2.667,15.5,0s7.5-7.334,7.5-14
V149h10V476z"/>
<path d="M205,42.5c0,11.667,4.167,21.667,12.5,30s18.333,12.5,30,12.5S269,80.833,277,72.5s12-18.333,12-30
s-4-21.667-12-30S259.167,0,247.5,0s-21.667,4.167-30,12.5S205,30.833,205,42.5z"/>
</g>
</def>
<mask id="mask" maskUnits="userSpaceOnUse" x="0" y="0" width="960" height="500">
<use xmlns:xlink="//www.w3.org/1999/xlink" xlink:href="#manIcon" x="260" y="0" fill="white" transform="translate(-25,-0) scale(1,1)"/>
</mask>
<rect mask="url(#mask)" x="0" y="0" width="960" height="500" fill="gray" />
<rect id="bar" mask="url(#mask)" x="0" y="250" width="960" height="250" fill="blue" />
</svg>
<script>
var rangeX = document.querySelector('#rangeX');
var h = 500;
rangeX['oninput' in rangeX ? 'oninput' : 'onchange'] = slide;
function slide(){
var barH = h * rangeX.value;
var bar = d3.select("#bar");
bar.transition().attr({
"y":h - barH,
"height":barH
})
}
</script>