JSFiddle - React, Tailwind, and code Playground

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 { 
  margin:0 20px; 
  width: 80%; 
  display: inline-block;
}
.slider_wrapper input.text {
  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'><span class='text'>1</span><div class='slider'/><span class='percent'></span></div>";
  
	$("#addSlider").click(function() {
  	var $newSlider = jQuery(strElement);
    
    $sliders.append($newSlider);
    $newSlider.find('.slider').slider({
      range: "min",
      max: 5,
      min: 1,
      value: 1,
      slide: update,
      change: update
    });
    
    aSliders.push($newSlider);
    
    updatePercentages();
  });
  
  function update(e, sliderHandle) {
  	var $movingSliderWrapper = $(sliderHandle.handle.closest('.slider_wrapper'));
    $movingSliderWrapper.find('.text').text(sliderHandle.value);
    $movingSliderWrapper.find('.slider').slider('value', sliderHandle.value);
    updatePercentages();
  }
  
  function updatePercentages() {
  	var valTotal = 0;
  	aSliders.forEach(function($sliderWrapper) {
    	valTotal += $sliderWrapper.find('.slider').slider('value');
    });
    
    aSliders.forEach(function($sliderWrapper) {
    	var val = $sliderWrapper.find('.slider').slider('value');
      $sliderWrapper.find('.percent').text(Math.round(val / valTotal * 100) + "%");
    });

  }


});