title: How do I stop the jquery UI slider from sliding beyond the gutter?
body: <p>I am using the jquery-ui slider as a sideways scroll bar, and am having issues with the fact the handle slides beyond the end gutter (it can be seen <a href="http://jqueryui.com/demos/slider/" rel="nofollow noreferrer">here</a> if you slide the slider the farthest to the right).  I have tried everything I can think of with CSS to try to get the handle to go no further than the gutter, but to no avail.  Any suggestions would be greatly appreciated.</p>
  
  <p>To clarify I am adding the following diagram which shows the problem (it is very subtle since the handle is small, however if you create a large handle in CSS, the handle goes  <strike>exactly</strike> half its width beyond the gutter).</p>
  
  <p><a href="http://jsbin.com/inome/edit" rel="nofollow noreferrer">Here</a> is a jsbin of the problem.  Basically I want the handle to stay within the gutter.</p>
  
  <p><img src="https://i.stack.imgur.com/cidT2.png" alt="alt text"></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;script src="http://code.jquery.com/jquery-2.1.0.min.js"&gt;&lt;/script&gt;
  &lt;link href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" /&gt;
  &lt;script src="http://code.jquery.com/jquery-1.11.0.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"&gt;&lt;/script&gt;
  
    &lt;style type="text/css"&gt;
  
    .demo {
       width: 800px;
       margin: 50px auto 0 auto;
    }
  
  
  
    .ui-slider-horizontal  {
      background: #DFEFFC none repeat scroll 0 0;
    }
  
    .ui-slider .ui-slider-handle {
      background-image:url(http://img207.imageshack.us/img207/7760/sliderhandle.png);
      cursor:default;
      height:15px;
      position: absolute;
      width:27px;
      z-index:2;   
      margin-left: -1px;
      margin-top: 3px;
    }
  
    .ui-slider 
    {
      position:relative;
      text-align:left;
    }
  
  
    &lt;/style&gt;
    &lt;script type="text/javascript"&gt;
    $(document).ready(function(){
      $("#slider").slider({
      slide: function( event, ui ) {      
  
              //normalise handle position between 0 and 1 relative to slider width
              var range = $("#slider").width();//width of slider
              var normalised = $("#slider1handle").position().left / range;
  
              //normalise between desired range: 0:HandleWidth
              var range2 = $("#slider1handle").width();
              normalised = (normalised*range2) + 1;      
  
              var marginAmount = -1*normalised;
              $("#slider1handle").css("margin-left", marginAmount);      
          }
  
      });
      $('a.ui-slider-handle').attr('id', "slider1handle");
  
  
  
    });
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="demo"&gt;
    &lt;div id="slider"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>