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 id="calculator">
  <div id="sum"></div>
  <div id="time"></div>
  <p id="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 sliderWithInput(options) {
  const $el = $(options.el).html(`
    <p>
      <label>${options.title}</label>
      <input type="text" class="input">
    </p>
    <div class="slider"></div>
  `);

  const $slider = $el.find('.slider').slider({
    range: 'min',
    ...options.sliderOptions,
    slide: (event, ui) => $input.val(ui.value).trigger('input'),
  });

  const $input = $el.find('.input').on('input', function() {
    const { min, max } = options.sliderOptions;
    const val = Math.min(max, Math.max(min, this.value));

    this.value = val;
    $slider.slider('value', val);
  }).val($slider.slider('value'));
}


[
  {
    el: '#sum',
    title: 'Сумма (руб.):',
    sliderOptions: {
      step: 50000,
      value: 3000000,
      min: 50000,
      max: 60000000,
    },
  },
  {
    el: '#time',
    title: 'Срок (мес.):',
    sliderOptions: {
      step: 1,
      value: 15,
      min: 1,
      max: 30,
    },
  },
].forEach(sliderWithInput);


$('#calculator').on('input', function() {
  const
    percent = 2,
    sum = +$('#sum .input').val(),
    time = +$('#time .input').val(),
    revenue = Math.floor(sum * ((time * 30) * percent / 365 / 100));

  $('#revenue span').html(`${revenue} &#8381;`);
}).trigger('input');