Slider mover

by mslocum

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css">
<div id="sliders"></div>

<br/>
<button id="addSlider">Add Slider</button>

CSS

.slider_wrapper {
    margin: 15px;
}
.slider_wrapper .slider { width: 80%; display: inline-block;}
.slider_wrapper input.text { 
  margin-left: 10px;
  width: 10%;
  display: inline-block;
  margin-top: -1px;
  vertical-align: top;
}
.ui-slider-range { background: green; }

JavaScript

$(function() {
	var aSliders = [],
  		$sliders = $("#sliders"),
      strElement = "<div class='slider_wrapper'><div class='slider'/><input class='text' type='text'/></div>";
  
	$("#addSlider").click(function() {
  	var $newSlider = jQuery(strElement),
    		val = aSliders.length == 0 ?
        	100 :
          aSliders.length == 1 ?
          100 - aSliders[0].find('.slider').slider('value') :
          0;
    
    $sliders.append($newSlider);
    $newSlider.find('.slider').slider({
      range: "min",
      max: 100,
      value: val,
      slide: updateSliders
    });
    $newSlider.find('.text').val(val);
    
    aSliders.push($newSlider);
  });
  
  function updateSliders(e, sliderHandle) {
  	var $movingSliderWrapper = $(sliderHandle.handle.closest('.slider_wrapper'));
    var val = updateSliderValue($movingSliderWrapper),
    		totalVals = val;
    
    aSliders.forEach(function($sliderWrapper) {
    	if ($sliderWrapper[0] == $movingSliderWrapper[0]) {
      	return
      }
      
      totalVals += $sliderWrapper.find('.slider').slider('value');
    });
    
    var subtract = (100 - totalVals) / (aSliders.length - 1);
    
    aSliders.forEach(function($sliderWrapper) {
    	if ($sliderWrapper[0] == $movingSliderWrapper[0]) {
      	return
      }
      
      var slider = $sliderWrapper.find('.slider'),
      		val = slider.slider('value') + subtract;
      slider.slider('value', val);
      $sliderWrapper.find('.text').val(val)
    });
  }
  
  function updateSliderValue($sliderWrapper) {
  	var val = $sliderWrapper.find('.slider').slider('value');
    $sliderWrapper.find('.text').val(val);
    return val;
  }

});