window.onload = function() {
	var largeHandle = document.getElementById('large-handle');
	var largeSlider = document.getElementById('rr-slider');
	var smallHandle = document.getElementById('small-handle');
	var smallSlider = document.getElementById('rr-slider-control');

	function alignBg() {
		var leftStr = smallHandle.style.left;
		var leftSm = parseInt(leftStr.substring(0,leftStr.length - 2));
		smallHandle.style.backgroundPosition = String(-leftSm) + 'px 1px';
	}

	new Dragdealer(largeSlider, {
		animationCallback: function(x, y) {
			var left = x * (smallHandle.offsetWidth - smallSlider.offsetWidth);
			smallHandle.style.left = String(parseInt(-left)) + 'px';
			alignBg();
		}
		});
	new Dragdealer(smallSlider, {
		xPrecision: largeHandle.offsetWidth,
		animationCallback: function(x, y) {
			var leftLg = x * (largeHandle.offsetWidth - largeSlider.offsetWidth);
			largeHandle.style.left = String(parseInt(-leftLg)) + 'px';
			alignBg();
		}
	});
};