Question

Anyone ever seen an example (or tutorial perferably) of using the jQuery UI slider element to control a jQuery Tools Scrollable? I’m looking to build a timeline-type page and want to have a horizontal scrollable that has the possibility of having a vertical scrollable within it. Looking to control it via a slider like the one built into jQUery UI.

I’d rather not re-invent the wheel when I’m pretty sure something already exists out there.

Answer 1

You can easly link the change event of the slider to the seekTo function of the Scrollable element, for example:

$( ".slider" ).slider({
     change: function(event, ui) {
           myScrollable.seekTo( $( ".slider" ).slider( "value" ) , 0 );
     }
});

And you also want to update the slider once the scrollable has moved (if there’s another way to move around).

var myScrollable = $( ".scrollable" ). scrollable({
     onSeek:function(){
           $( ".slider" ).slider( "value" , myScrollable.getIndex() );
     }
})