score:1

Accepted answer

You can manually check boundaries in updatePos function:

function updatePos(elem){
    var xPos = d3.mouse(  elem)[0];
    if (xPos > x(x.domain()[1])) {
      xPos = x(x.domain()[1])
    }
    if (xPos < x(x.domain()[0])) {
      xPos = x(x.domain()[0])
    }
    handle.attr('transform', 'translate(' + xPos + ",0)");
    sliderDateDisplay = formatDateSliderDisplay(x.invert(xPos));
    text.text(sliderDateDisplay);
}

Here is a demo: http://plnkr.co/edit/q0Xl2McbteimL6QIGi4I?p=preview