How do I stop the jquery UI slider from sliding beyond the gutter?

I had the same problem and my solution is very simple i think. As Dr.Gibbs said draggable slider handle containment is set to 'parent' as default. So you can overcome it by using css...

consider handle img is 100px, and containment div is 250px wide. Than containment div should have width value 250 - 100 = 150px and margin-right:100px to have the maxZoom img to be shown on correct place. Than you have the exact limit for your handle image...

the handle goes exactly its width beyond the gutter

More like exactly half its width, so it's not really moving past the end of the slider. When aligning your screenshots correctly, then you'll see the center of the handle is at the end of the slider, just like I expect it to be for a very precise setting. When the left is 0%, and the right is 100%, then the handle has to move past the end a bit to allow for choosing that 100%.

This is the same when enlarging the handle. When in your case the handle moves more than half its width over the right edge, then I assume it extends less than half on the left? When playing with the CSS a bit I get the same effect with huge handles, like:

.ui-slider-horizontal .ui-state-default {
  /** Defaults: 
      margin-left: -0.6em;
      top: -0.3em;
  */
  width: 69px;
  height: 140px;
  margin-left: -39px;
  top: -68px;
}

Even better shown using an arrow, a bit of a hack:

.ui-slider-horizontal .ui-state-default {
  width: 40px;
  margin-left: -20px;
  top: 15px;
  background-color: white;
  background-image: url('http://i.stack.imgur.com/ObK9i.png');
  background-repeat: no-repeat;
  border: 0;
}

However, as for your usage as a scrollbar, see the slider scrollbar demo, which seems to do what you want? Use a slider to manipulate the positioning of content on the page. In this case, it acts as a scrollbar with the potential to capture values if needed.

If you add a cap to either end of the slider you can mimic the effect without changing anything about the slider itself.

<div class="cap left"></div>
(slider container here)
<div class="cap right"></div>

Just add some very basic CSS...

.cap {
    width: (half the handle width)
}
.ui-slider, .cap.left, .cap.right {
    float: left;
}
.ui-slider {
    width: (desired total gutter width - handle width);
}
.ui-slider-handle {
    margin-left: -(half the handle width);
}

...then style your caps accordingly.

For range shading on a single slider, just style the left cap with the range effect instead of the normal gutter.