JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<div class="calculator">
					
  <p>
    <label for="amount">Сумма (руб.):</label>
    <input type="text" class="amount" data-max="60000000" data-min="50000">
  </p>

  <div class="slider-range-min"></div>

  <p>
    <label for="amount">Срок (мес.):</label>
    <input type="text" class="amount2" data-max="30" data-min="1">
  </p>

  <div class="slider-range-min2"></div>

  <p class="revenue">Стоимость составит: <strong><span></span></strong></p>

</div>

CSS

body {
    background-color: #2c3844;
    color: #fff;
}
input {
    background-color: #2c3844;
    color: #34a3db;
}
span { 
    color: #91e8fc;
}
.ui-widget-content{
    background: #6b6b6b;
    border-color: #6b6b6b;
}
.ui-slider-handle {
    background: #c1c2c4;
    border-radius: 0.6em;
}
.ui-slider-range {
    background: #34a3db;
}

JavaScript

$(function () {

	//Calculator
	var sum = 3000000,
		time = 15,
		percent = 2,
		revenue = 0,
		result_outptut = jQuery(".revenue span");

	function recount() {
		revenue = Math.floor(sum*((time*30)*percent/365/100));
		result_outptut.html(revenue + ' &#8381;');
	};
	$(document).on("change keyup", ".amount", function () {
		sum = +$(this).val();
		$(".slider-range-min").slider("value", sum);
		recount();
	});
	$(document).on("change keyup", ".amount2", function () {
		time = +$(this).val();
		$(".slider-range-min2").slider("value", time);
		recount();
	});
  
  $('input[type="text"]').on('input', function() {
    var obj = $(this),
        max = obj.data('max'),
        min = obj.data('min');

    if (obj.val() >= max)
      obj.val(max);
    else if (obj.val() <= min)
      obj.val(min);

    })
    
	$(".slider-range-min")
  
  .slider({
		range: "min",
		step: 50000,
		value: 3000000,
		min: 50000,
		max: 60000000,
		slide: function (event, ui) {
			$('.amount').val(ui.value).trigger("change");
		}
	});
	$(".amount").val($(".slider-range-min").slider("value"));

	$(".slider-range-min2").slider({
		range: "min",
		value: 15,
		min: 1,
		max: 30,
		slide: function (event, ui) {
			$(".amount2").val(ui.value).trigger("change");
		}
	});
	$(".amount2").val($(".slider-range-min2").slider("value"));


});