Question

i have a slider that scrolls on drag using the jquery UI however the handle seems to drag slightly to far off the end of the slide bar can anyoune see why this might be?

HTML

    <div id="content">

<div id="sliderContent">    
      <div class="viewer">
        <div class="content-conveyor ui-helper-clearfix">

          <div class="item">

          <img src="images/slide_image_one.png"/>

          </div>

          <div class="item">

          <img src="images/slide_image_one.png"/>

          </div>

          <div class="item">

          <img src="images/slide_image_one.png"/>

          </div>

          <div class="item">

          <img src="images/slide_image_one.png"/>

          </div>

          <div class="item">

          <img src="images/slide_image_one.png"/>

          </div>

        </div>
      </div>
      <div id="slider"></div>
    </div>

    </div>

CSS
/* Sliding banner element */

#sliderContent { width:900px; padding:0 0 0 0;}
.viewer { width:900px; height:299px; padding:0px; overflow:hidden; position:relative;}
.content-conveyor { width:900px; height:299px; position:relative; }
.item { width:450px; height: 299px; float:left;}

#slider {
margin: 10px 0 0 0;
}
.ui-slider-horizontal {
    height: 4px;
    background: url(../images/slider_bg.png;);
    border: none;
    width: 900px;
    float: left;
}

.ui-slider .ui-slider-handle {
    cursor: default;
    height: 15px;
    position: absolute;
    width: 25px;
    z-index: 2;
    background: url('../images/slider_handle.png') no-repeat;
    border: none;
}

javascript

<script type="text/javascript">
      $(function() {

        //vars
        var conveyor = $(".content-conveyor", $("#sliderContent")),
        item = $(".item", $("#sliderContent"));

        //set length of conveyor
        conveyor.css("width", item.length * parseInt(item.css("width")));

        //config
        var sliderOpts = {
          max: (item.length * parseInt(item.css("width"))) - parseInt($(".viewer", $("#sliderContent")).css("width")),
          slide: function(e, ui) { 
            conveyor.css("left", "-" + ui.value + "px");
          }
        };

        //create slider
        $("#slider").slider(sliderOpts);
      });
    </script>

Answer 1

The slider position is based on the left most position of the helper. You need to do a have a wrapper around it for positioning, and pull the helper back with a margin of half it’s width.

See the following jsFiddle for a solution using your code.

http://jsfiddle.net/Bprw2/1/

Or http://jqueryui.com/demos/slider/#side-scroll and open the source for a more extensive example.

Hope this helps