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><br>
<label>Автобусом <input type="checkbox" name="type" value="300" checked /></label><br>
<label>самолетом <input type="checkbox" name="type" value="100" /></label><br>


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

CSS

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

JavaScript

function updatePrice() {
  var price =
    +$('#amount1').val() +
    +$('#amount2').val() +
    $('[name="type"]:checked').toArray().reduce((sum, n) => sum + +$(n).val(), 0);

 	$( "#amount3" ).val("$" + price);
}

$( "#polzunok-1" ).slider({
  value:0,
  min: 0,
  max: 20,
  step: 1,
  slide: function( event, ui ) {
    $( "#amount1" ).val( ui.value );
    updatePrice();
  }
});

$( "#polzunok-2" ).slider({
  value:0,
  min: 0,
  max: 20,
  step: 1,
  slide: function( event, ui ) {
    $( "#amount2" ).val( ui.value );
    updatePrice();
  }
});

$('[name="type"]').change(updatePrice);

updatePrice();