JSFiddle - React, Tailwind, and code Playground

by RootAccess777

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<body>
  <div>
    <div>
      Some static value: 
      <input type="text" id="staticFld" value="51" disabled/><br />
    </div>
    <div>
      Changable value: 
      <input type="number" id="changableFld" value="10"/>
    </div>
    <div>
      Result of formula: 
      <input type="text" id="resultFld" value="" disabled />
    </div>
    <div>
      All sliders summarized: 
      <input type="text" id="summarizedSlidersFld" value="" disabled />
    </div>
  </div>

  <div class="slideWrapper">
    <div id="labor-cost-slider"></div>
    <span id="currentSliderVal"></span>
  </div>
  <div class="slideWrapper">
    <div id="labor-cost-slider1"></div>
    <span id="currentSliderVal1"></span>
  </div>
  <div class="slideWrapper">
    <div id="labor-cost-slider2"></div>
    <span id="currentSliderVal2"></span>
  </div>
 
</body>

CSS

input {
  margin: 10px;
}

.slideWrapper {
  width: 200px;
  padding: 20px;  
}

JavaScript

$(function() {
 
  	//Sliders
    $( "#labor-cost-slider" ).slider({
    	min: 1,
      max:50,
      value: 20,
			slide: function( event, ui ) {
      	//Это только чтобы показать в как поле меняется
        var currentSliderVal = $('#labor-cost-slider').slider("value");
      	$('#currentSliderVal').html(currentSliderVal);
        
        calculateAll(); //Пересчитать всё
      }
		});
    $( "#labor-cost-slider1" ).slider({
    	min: 1,
      max:10,
      value: 9,
			slide: function( event, ui ) {
      	//Это только чтобы показать в как поле меняется
        var currentSliderVal = $('#labor-cost-slider1').slider("value");
      	$('#currentSliderVal1').html(currentSliderVal);
        
        calculateAll(); //Пересчитать всё
      }
		});
    $( "#labor-cost-slider2" ).slider({
    	min: 1,
      max:150,
      value: 50,
			slide: function( event, ui ) {
      	//Это только чтобы показать в как поле меняется
        var currentSliderVal = $('#labor-cost-slider2').slider("value");
      	$('#currentSliderVal2').html(currentSliderVal);
        
        calculateAll(); //Пересчитать всё
      }
		});
    
  //Field change handlers
  	$('#changableFld').on('change keyup', function(evnt) {
    	calculateAll();
    });
    
    //Initial display (can move to separate function)
    $('#currentSliderVal').html(
    	$('#labor-cost-slider').slider("value")
    );
    $('#currentSliderVal1').html(
    	$('#labor-cost-slider1').slider("value")
    );
    $('#currentSliderVal2').html(
    	$('#labor-cost-slider2').slider("value")
    );
    
  	//Initial calculation on page load
		calculateAll();
    
    //Functions
    //All your calculations
  	function calculateAll() {
        var currentSliderVal = $('#labor-cost-slider').slider("value")/1;
        var currentSliderVal1 = $('#labor-cost-slider1').slider("value")/1;
        var currentSliderVal2 = $('#labor-cost-slider2').slider("value")/1;
        var staticFldVal = $('#staticFld').val()/1;
        var...