jQuery Linked UI Sliders

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:

 

 

   

  Remove

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

$('#removeLinked').toggle(function() {
		$(this).text('Re-attach');
		$('span.defaultSlider').linkedSliders('destroy');
	},
	function() {
		$(this).text('Remove');
		$('span.defaultSlider').linkedSliders();
	}
);

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: next - next in order prev - previous in order first - always start from first then next in order last - always start from last then previous in order all - distribute between all other sliders

 

 

 

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

$('#policySelect').change(function() {
	$('span.policySlider').linkedSliders('change', '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 (kbwood{at}iinet.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('change', settings);  // Update the linked settings
$(selector).linkedSliders('change', name, value);  // Update a single linked setting

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