JSFiddle - React, Tailwind, and code Playground

by Stepa Poperechnyi

HTML

<html>
<head>

  
</head>
<body>
	<div class="first-slider">
		<p>
			<label for="amount">Инвестировать (50 000 шаг увеличения):</label>
			<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
		</p>
		 
		<div id="slider"></div>
	</div>


	<div class="second-slider">
		<p>
		  	<label for="amount1">Проценты(10% шаг увеличения):</label>
		  	<input type="text" id="amount1" readonly style="border:0; color:#f6931f; font-weight:bold;">
		</p>
		 
		<div id="second-slider"></div>
	</div>

	<div class="results">
		<input type="text" id="calculating-result" readonly style="border:0; color:#f6931f; font-weight:bold;">
	</div>

	
	
</body>
</html>

CSS

<html>
<head>
	<meta charset="UTF-8">
	<title>Calculater</title>
	<meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">  
  <link rel="stylesheet" href="css/jquery-ui.css">
  <link rel="stylesheet" href="css/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="js/jquery-ui.js"></script>
</head>
<body>
	<div class="first-slider">
		<p>
			<label for="amount">Инвестировать (50 000 шаг увеличения):</label>
			<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
		</p>
		 
		<div id="slider"></div>
	</div>


	<div class="second-slider">
		<p>
		  	<label for="amount1">Проценты(10% шаг увеличения):</label>
		  	<input type="text" id="amount1" readonly style="border:0; color:#f6931f; font-weight:bold;">
		</p>
		 
		<div id="second-slider"></div>
	</div>

	<div class="results">
		<input type="text" id="calculating-result" readonly style="border:0; color:#f6931f; font-weight:bold;">
	</div>

	<script>

	/*slider*/

	

	$( function() {
		var variable_slider;
		var variable_second_slider;
		var result;


	    $( "#slider" ).slider({
	      value:100000,
	      min: 100000,
	      max: 6000000,
	      step: 50000,
	      slide: function( event, ui ) {
	        $( "#amount" ).val( "$" + ui.value );
	        variable_slider = ui.value;
	      }
	    }


	    );
	    $( "#amount" ).val( "$" + $( "#slider" ).slider( "value" ) );

	    $( "#second-slider" ).slider({
	      value:20,
	      min: 20,
	      max: 40,
	      step: 10,
	      slide: function( event, ui ) {
	        $( "#amount1" ).val( "$" + ui.value ); 
	        variable_second_slider = ui.value;      
	      }


	    }
	    );
	    $( "#amount1" ).val( "$" + $( "#second-slider" ).slider( "value" ) );

	   
		
		if(variable_second_slider==20){
			variable_second_slider=10;
		}
		else if(variable_second_slider==30){
			variable_second_slider=30;
		}
		else...

JavaScript

$( function() {
		var variable_slider;
		var variable_second_slider;
		var result;


	    $( "#slider" ).slider({
	      value:100000,
	      min: 100000,
	      max: 6000000,
	      step: 50000,
	      slide: function( event, ui ) {
	        $( "#amount" ).val( "$" + ui.value );
	        variable_slider = ui.value;
	      }
	    }


	    );
	    $( "#amount" ).val( "$" + $( "#slider" ).slider( "value" ) );

	    $( "#second-slider" ).slider({
	      value:20,
	      min: 20,
	      max: 40,
	      step: 10,
	      slide: function( event, ui ) {
	        $( "#amount1" ).val( "$" + ui.value ); 
	        variable_second_slider = ui.value;      
	      }


	    }
	    );
	    $( "#amount1" ).val( "$" + $( "#second-slider" ).slider( "value" ) );

	   
		
		if(variable_second_slider==20){
			variable_second_slider=10;
		}
		else if(variable_second_slider==30){
			variable_second_slider=30;
		}
		else if(variable_second_slider==40){
			variable_second_slider=80;
		}


	
		result = ((variable_slider * variable_second_slider)/100)+variable_slider;

		$("#calculating-result").val("рублей" + result);/*ВЫВОД РЕЗУЛЬТАТА*/
	   
	  });