JSFiddle - React, Tailwind, and code Playground

by Павел KLON

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" data-percent="2">
  <p>
    <label>
      Сумма (руб.):
      <input type="text" class="amount" data-max="60000000" data-min="50000">
    </label>
  </p>
  <div class="slider-range-min"></div>
  <p>
    <label>
      Срок (мес.):
      <input type="text" class="amount2" data-max="30" data-min="1">
    </label>
  </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;
}

input + span {
  color: red;
}

.ui-widget-content {
  background: #6b6b6b;
  border-color: #6b6b6b;
}

.ui-slider-handle {
  background: #c1c2c4;
  border-radius: 0.6em;
}

.ui-slider-range {
  background: #34a3db;
}

JavaScript

$('.calculator').each(function () {
		let
			sum = 3000000,
			time = 15,
			percent = $(this).data('percent');

		const recount = () => {
			const revenue = Math.floor(sum * ((time * 30) * percent / 365 / 100));
			$('.revenue span', this).html(revenue + ' &#8381;');
      $('.revenue span').text((i, text) => {
  const [ price, currency ] = text.split(' ');
  return `${(+price).toLocaleString()} ${currency}`;
});
$('.amount').val((i, text) => {
  const [ price, currency ] = text.split(' ');
  return `${(+price).toLocaleString()} ${currency}`;
});
		};

		$(this).on('change keyup', '.amount', e => {
			sum = +$(e.target).val();
			$('.slider-range-min', this).slider('value', sum);
			recount();
		});
		$(this).on('change keyup', '.amount2', e => {
			time = +$(e.target).val();
			$('.slider-range-min2', this).slider('value', time);
			recount();
		});

		$('input[type="text"]', this).on('change', function () {
			const
				$this = $(this),
				data = $this.data();

			$this.val(Math.min(data.max, Math.max(data.min, $this.val())));
		});

		$('.slider-range-min', this).slider({
			range: 'min',
			step: 50000,
			value: 3000000,
			min: $('.amount', this).data('min'),
			max: $('.amount', this).data('max'),
			slide: (event, ui) => {
				$('.amount', this).val(ui.value).trigger('change');
			}
		});
		$('.amount', this).val($('.slider-range-min', this).slider('value'));

		$('.slider-range-min2', this).slider({
			range: 'min',
			value: 15,
			min: $('.amount2', this).data('min'),
			max: $('.amount2', this).data('max'),
			slide: (event, ui) => {
				$('.amount2', this).val(ui.value).trigger('change');
			}
		});
		$('.amount2', this).val($('.slider-range-min2', this).slider('value'));

		recount();
	});