Grouped Sliders

A jquery plugin to implement grouped behavior to jQuery UI sliders.

View the Demo

Instructions

Dependencies:

jQuery
jQueryUI - Slider Component

Basic usage:

Note: This plugin will activate sliders using jQuery UI. To function properly, sliders much not be previously activated within selected items.

This will create two sliders grouped together with default settings.

<div id="sliderGroup">
    <div class="slider"></div>
    <div class="slider"></div>
</div>

<script>
   $('#sliderGroup').groupedSliders()
</script>

With options (using same html as above example)

<script>
   $('#sliderGroup').groupedSliders(
   {
      startState:'unlocked',
      total: 300 // Combined value of sliders will be 300
   })
</script>

With bound input box and lock toggle button.

<div id="sliderGroup">
    <input type="text" class="slider-text" name="slider">
    <div class="slider"></div>
    <span class="ui-icon ui-icon-unlocked slider-lock"></span>	            

    <input type="text" class="slider-text" name="slider2">
    <div class="slider"></div>
    <span class="ui-icon ui-icon-unlocked slider-lock"></span>				
</div>

<script>
   $('#sliderGroup').groupedSliders(
   {
      startState:'unlocked',
      total: 100
   })
</script>

Classes

Class Name	Description
.slider	Used by jquery-ui, applied on elements to become sliders.
.slider-text	Applied to a text input preceding a slider, this will bind the current numerical value of the slider to the input box.
.slider-lock	Applied to an element following a slider, will convert said button into a lock / unlock toggle for the previous slider. (Note: currently designed for use with jquery UI icons, this will add the ui-icon-unlocked / ui-icon-locked classes to the element - pending revision )

Options

Option	Type	Description	Default
startState	String	Supports 'locked' & 'unlocked', Indicated default status of sliders	unlocked
total	Integer	The total value to be shared by the sliders	100