Hi
I have 3 javascript sliders that I want to link together so they all add up to 100% between them instead of seperatly. I'm not sure how or if its posiible to link these, any ideas?

Code:
<div>Body language
     <div class="horizontal_track" id="horizontal_track_1" >
       <div class="horizontal_slit" id="horizontal_slit_1" >&nbsp;</div>
		<!-- total movement: 100 pixels, scale: 1 [value/pixel],
			default position: 80 pixels, connected to value_display_1 -->
   <div class="horizontal_slider" id="horizontal_slider_1" style="left: 0px;"
			onmousedown="slide(event, 'horizontal', 100, 0, 100, 101, 0, 'value_display_1');" >&nbsp;</div>
</div>
	<!-- Value display 1 (green) -->
	<div class="display_holder" id="display_holder_1" >
		<!-- Default value: 80 -->
	  <input type="text" class="value_display" id="value_display_1" value="0" onfocus="blur(this);"/></div></div><br />
    
   <div> Tone of Voice
	<!-- Horizontal slider 2 (blue) -->
	<div class="horizontal_track" id="horizontal_track_2" >
		<div class="horizontal_slit" id="horizontal_slit_2" >&nbsp;</div>
		<!-- total movement: 100 pixels, scale: 1 [value/pixel],
			default position: 0 pixels, connected to value_display_2 -->
<div class="horizontal_slider" id="horizontal_slider_2" style="left: 0px;"
			onmousedown="slide(event, 'horizontal', 100, 0, 100, 21, 0, 'value_display_2');">&nbsp;</div>
	</div>

	<!-- Value display 2 (blue)	-->
	<div class="display_holder" id="display_holder_2" >
		<!-- Default value: 0 -->
	  <input type="text" class="value_display" id="value_display_2" value="0" onfocus="blur(this);" />
	</div>  </div> <br />
    
<div>Words Used
	<!-- Horizontal slider 3 (red) -->
	<div class="horizontal_track" id="horizontal_track_3" >
		<div class="horizontal_slit" id="horizontal_slit_3" >&nbsp;</div>
		<!-- Total movement: 100 pixels, Scale: 1 [value/pixel],
			Default position: 0 pixels, Connected to value_display_3 -->
	  <div class="horizontal_slider" id="horizontal_slider_3" style="left: 0px;"
			onmousedown="slide(event, 'horizontal', 100, 0, 100, 11, 0, 'value_display_3');">&nbsp;</div>
	</div>

	<!-- Value display 3 (red)	-->
	<div class="display_holder" id="display_holder_3" >
		<!-- Default value: 0 -->
	  <input type="text" class="value_display" id="value_display_3" value="0" onfocus="blur(this);" />
	</div> </div>

There is also a javascript that links to this....

[CODE]
// learnGetElementByID: Cross-browser version of "document.getElementById()"
function learnGetElementById(element)
{
if (document.getElementById) element = document.getElementById(element);
else if (document.all) element = document.all[element];
else element = null;
return element;
}
// learnLeft: Cross-browser version of "element.style.left"
function learnLeft(elmnt, pos)
{
if (!(elmnt = learnGetElementById(elmnt))) return 0;
if (elmnt.style && (typeof(elmnt.style.left) == 'string')) {
if (typeof(pos) == 'number') elmnt.style.left = pos + 'px';
else {
pos = parseInt(elmnt.style.left);
if (isNaN(pos)) pos = 0;
}
}
else if (elmnt.style && elmnt.style.pixelLeft) {
if (typeof(pos) == 'number') elmnt.style.pixelLeft = pos;
else pos = elmnt.style.pixelLeft;
}
return pos;
}
// learnTop: Cross-browser version of "element.style.top"
function learnTop(elmnt, pos)
{
if (!(elmnt = learnGetElementById(elmnt))) return 0;
if (elmnt.style && (typeof(elmnt.style.top) == 'string')) {
if (typeof(pos) == 'number') elmnt.style.top = pos + 'px';
else {
pos = parseInt(elmnt.style.top);
if (isNaN(pos)) pos = 0;
}
}
else if (elmnt.style && elmnt.style.pixelTop) {
if (typeof(pos) == 'number') elmnt.style.pixelTop = pos;
else pos = elmnt.style.pixelTop;
}
return pos;
}
// moveSlider: Handles slider and display while dragging
function moveSlider(evnt)
{
var evnt = (!evnt) ? window.event : evnt; // The mousemove event
if (mouseover) { // Only if slider is dragged
x = pxLeft + evnt.screenX - xCoord // Horizontal mouse position relative to allowed slider positions
y = pxTop + evnt.screenY - yCoord // Horizontal mouse position relative to allowed slider positions
if (x > xMax) x = xMax // Limit horizontal movement
if (x < 0) x = 0 // Limit horizontal movement
if (y > yMax) y = yMax // Limit vertical movement
if (y < 0) y = 0 // Limit vertical movement
learnLeft(sliderObj.id, x) // move slider to new horizontal position
learnTop(sliderObj.id, y) // move slider to new vertical position
sliderVal = x + y // pixel value of slider regardless of orientation
sliderPos = (sliderObj.pxLen / sliderObj.valCount) * Math.round(sliderObj.valCount * sliderVal / sliderObj.pxLen)
v = Math.round((sliderPos * sliderObj.scale + sliderObj.fromVal) * // calculate display value
Math.pow(10, displayObj.dec)) / Math.pow(10, displayObj.dec)
displayObj.value = v // put the new value in the slider display element
return false
}
return
}
// moveSlider: Handles the start of a slider move.
function slide(evnt, orientation, length, from, to, count, decimals, display)
{
if (!evnt) evnt = window.event;
sliderObj = (evnt.target) ? evnt.target : evnt.srcElement; // Get the activated slider element.
sliderObj.pxLen = length // The allowed slider movement in pixels.
sliderObj.valCount = count ? count - 1 : length // Allowed number of values in the interval.
displayObj = learnGetElementById(display) // Get the associated display element.
displayObj.dec = decimals // Number of decimals to be displayed.
sliderObj.scale = (to - from) / length // Slider-display scale [value-change per pixel of movement].
if (orientation == 'horizontal') { // Set limits for horizontal sliders.
sliderObj.fromVal = from
xMax = length
yMax = 0
}
if (orientation == 'vertical') { // Set limits and scale for vertical sliders.
sliderObj.fromVal = to
xMax = 0
yMax = length
sliderObj.scale = -sliderObj.scale // Invert scale for vertical sliders. "Higher is more."
}
pxLeft = learnLeft(sliderObj.id) // Sliders horizontal position at start of slide.
pxTop = learnTop(sliderObj.id) // Sliders vertical position at start of slide.
xCoord = evnt.screenX // Horizontal mouse position at start of slide.
yCoord = evnt.screenY // Vertical mouse position at start of slide.
mouseover = true
document.onmousemove = moveSlider // Start the action if the mouse is dragged.
document.onmouseup = sliderMouseUp // Stop sliding.
}
// sliderMouseup: Handles the mouseup event after moving a slider.
// Snaps the slider position to allowed/displayed value.
function sliderMouseUp()
{
mouseover = false // Stop the sliding.
v = (displayObj.value) ? displayObj.value : 0 // Find last display value.
pos = (v - sliderObj.fromVal)/(sliderObj.scale) // Calculate slider position (regardless of orientation).
if (yMax == 0) learnLeft(sliderObj.id, pos) // Snap horizontal slider to corresponding display position.
if (xMax == 0) learnTop(sliderObj.id, pos) // Snap vertical slider to corresponding display position.
if (document.removeEventListener) { // Remove event listeners from 'document' (Moz&co).
document.removeEventListener('mousemove', moveSlider)
document.removeEventListener('mouseup', sliderMouseUp)
}
else if (document.detachEvent) { // Remove event listeners from 'document' (IE&co).
document.detachEvent('onmousemove', moveSlider)
document.detachEvent('onmouseup', sliderMouseUp)
}
}

[/CODE

Any ideas of how to link the three so they all add up to 100% and change when the sliders are moved?