JSFiddle - React, Tailwind, and code Playground

by Maksim

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
		<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
		<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>	
 
 <div class="polzunok-wrap">
			<span>Сколько первого?</span>
			<div id="polzunok-1"></div>
</div>
<div class="polzunok-wrap">
		<span>Сколько второго?</span>
		<div id="polzunok-2"></div>
</div>



<input type="text" id="amount1" value="0"><br>
<input type="text" id="amount2" value="0"><br>
<input type="text" id="amount3">

CSS

#polzunok-1{width:70%}
#polzunok-2{width:70%}

JavaScript

$( function() {
    $( "#polzunok-1" ).slider({
      value:100,
      min: 0,
      max: 500,
      step: 50,
      slide: function( event, ui ) {
        $( "#amount1" ).val( ui.value );
        var temp = Number($('#amount1').val()) + Number($('#amount2').val());
        $( "#amount3" ).val("$" + temp);
      }
    });
	$( "#polzunok-2" ).slider({
      value:100,
      min: 0,
      max: 500,
      step: 50,
      slide: function( event, ui ) {
        $( "#amount2" ).val( ui.value );
        var temp = Number($('#amount1').val()) + Number($('#amount2').val());
        $( "#amount3" ).val("$" + temp);
      }
    });
    
	
	
  } );