Question

I am using this implementation of the ui.slider which controls the ui.tabs as found on the Jquery website:

http://jqueryui.com/demos/slider/#tabs

Everything is working fine however when I directly link to a tab, the slider always stays in its initial position (or whatever you stated as the initial value).

Demo can be found here: http://jqueryui.com/demos/slider/tabs.html#tabs-2

Is there any way of setting the slider to the same position as the tab when it is directly linked to?

Thanks very much.

Answer 1

Something like this should do it:

$(function() {
        $( "#tabs" ).tabs({
            select: function( event, ui ) {
                $( "#slider" ).slider( "value", ui.index );
            }
        });
        $( "#slider" ).slider({
            min: 0,
            max: $( "#tabs" ).tabs( "length" ) - 1,
            slide: function( event, ui ) {
                $( "#tabs" ).tabs( "select", ui.value );
            },
            value: $( "#tabs" ).tabs( "option", "selected" )
        });
    });