bind jquery slider handle to overflow ??

Question

if i have a basic jquery slider in place:

$(document).ready(function() {
$('#slider').slider({
value:15,
min: 1,
max: 30,
step: 1,
animate:true,
orientation:"horizontal"
});
});

and for my timeline CSS i have this:

#container{
  height:300px;
  border:1px solid #000;
  padding: 10px;
  overflow:auto;
}

.ul-class{
  width:10000px;
  height:280px;
  list-style-type:none;
  margin:0;
  padding:0;
}

.li-class{
  float:left;
  width:980px;
  padding:0 10px;
}

how do i bind the action of the slider handle to the overflow of the container?

i think thats all i would need to make a basic timeline slider right?