Default Settings

The linked sliders functionality can easily be added to an existing set of jQuery UI Sliders with appropriate default settings.

You can also remove the linked sliders functionality if it is no longer required.

Default percentage:

 

 

   

 

$('span.defaultSlider').slider().linkedSliders().
	filter(':first').slider('value', 100);
	
$('#removeLinked').click(function() {
	var destroy = $(this).text() === 'Remove';
	$(this).text(destroy ? 'Re-attach' : 'Remove');
	$('span.defaultSlider').linkedSliders(destroy ? 'destroy' : {});
});

You can override the defaults globally as shown below:

$.linkedSliders.setDefaults({policy: 'first'});

Processed elements are marked with a class of hasLinkedSliders and are not re-processed if targetted a second time.

Adjustment Policy

You can alter the order in which the other sliders are changed to retain the new total by setting the policy option.

Adjustment policy:

 

 

 

$('span.policySlider').slider().linkedSliders().
	filter(':first').slider('value', 100);

$('#policySelect').change(function() {
	$('span.policySlider').linkedSliders('option', 'policy', $(this).val());
});
Other options

The sliders may be aligned vertically.

Vertical sliders:

$('span.verticalSlider').slider({orientation: 'vertical'}).linkedSliders().
	filter(':first').slider('value', 100);

You can change the value of the sliders and linked total.

Change totals:

$('span.totalsSlider').slider({orientation: 'vertical', max: 50}).
	linkedSliders({total: 60}).
	eq(1).slider('value', 30);
In the Wild

This tab highlights examples of this plugin in use "in the wild".

To add another example, please contact me (wood.keith{at}optusnet.com.au) and provide the plugin name, the URL of your site, its title, and a short description of its purpose and where/how the plugin is used.

Quick Reference

A full list of all possible settings is shown below. Note that not all would apply in all cases. For more detail see the documentation reference page.

$(selector).linkedSliders({
	total: 100,  // The total for all the linked sliders
	policy: 'next' // Adjustment policy: 'next', 'prev', 'first', 'last', 'all'
});

$.linkedSliders.setDefaults(settings);  // Change default settings

$(selector).linkedSliders('option', settings);  // Update the linked settings
$(selector).linkedSliders('option', name, value);  // Update a single linked setting
$(selector).linkedSliders('option', name);  // Retrieve a linked setting

$(selector).linkedSliders('destroy');  // Remove the linked sliders