onMouseDown setInterval and onMouseUp clearInterval

onMouseDown setInterval and onMouseUp clearInterval

I have a event that is fired when a button is pressed, it moves a Google
ChartRangeFilter to the left as long as the button is pressed down using
an interval, when the mouse button is unpressed it clears the interval.
var leftStepBackBtn = document.getElementById('leftStepBack');
leftStepBackBtn.onmousedown = function () {
console.log("mousedown");
console.log(startRange);
timer = setInterval(leftStepBack, interval)
}
leftStepBackBtn.onmouseup = function () {
clearInterval(timer);
}
The Problem i have is, if the button is pressed and held down and the
mouse is moved off the button and released the interval continues.
I understand that because the mouseUp event is tied to the button it wont
get fired if the mouse ins't over the button when released.
my question is there a better solution to fix this than binding the
mouseUp event to something bigger say the body?