JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ionden.com/a/plugins/ion.rangeSlider/static/js/ion-rangeSlider/ion.rangeSlider.js"></script>
<link rel="stylesheet" href="http://ionden.com/a/plugins/ion.rangeSlider/static/css/ion.rangeSlider.css">
 <div class="rande_input">
                            <h3>Бюджет</h3>
      <input type="text" id="mysql" class="slider-kit" value=""/>
      <h3>Клиентов</h3>
      <input type="text" id="disk" class="slider-kit" value=""/>
      

        <div id="monthly-calc">0 руб.</div>	
        <div id="monthly-cal">0 клиентов</div>	
                                </div>

CSS

body {
  padding: 0 30px;
}
.irs {
    height: 55px;
}
.irs-with-grid {
    height: 75px;
}
.irs-line {
    height: 10px; top: 33px;
   background-color: rgba(55, 63, 70, 0.6);
box-shadow: 0 1px 0 rgba(228, 236, 242, 0.08), inset 0 1px 0 rgba(0, 0, 0, 0.1);
    border: 0;
    border-radius: 16px;
    -moz-border-radius: 16px;
}
    .irs-line-left {
        height: 8px;
    }
    .irs-line-mid {
        height: 8px;
    }
    .irs-line-right {
        height: 8px;
    }

.irs-bar {
    height: 10px;
    top: 33px;
    

   background-color: #6dd2ff;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}
    .irs-bar-edge {
        height: 10px; top: 33px;
        width: 14px;
        border: 0;
        border-right: 0;
        background-color: #6dd2ff;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
        border-radius: 16px 0 0 16px;
        -moz-border-radius: 16px 0 0 16px;
    }

.irs-shadow {
    height: 2px; top: 38px;
    background: #000;
    opacity: 0.3;
    border-radius: 5px;
    -moz-border-radius: 5px;
    
}
.lt-ie9 .irs-shadow {
    filter: alpha(opacity=30);
    
}

.irs-slider {
    top: 25px;
    width: 27px; height: 27px;
    border: 1px solid #AAA;
    background: #DDD;
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(220,220,220,1) 20%,rgba(255,255,255,1) 100%); /* W3C */
    border-radius: 27px;
    -moz-border-radius: 27px;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
    cursor: pointer;
}

.irs-slider.state_hover, .irs-slider:hover {
    background: #FFF;
}

.irs-min, .irs-max {
    color: #333;
    font-size: 12px; line-height: 1.333;
    text-shadow: none;
    top: 0;
    padding: 1px 5px;
    background: rgba(0,0,0,0.1);
    border-radius: 3px;
    -moz-border-radius: 3px;
}

.lt-ie9 .irs-min, .lt-ie9 .irs-max {
    background: #ccc;
}

.irs-from, .irs-to, .irs-single {
    color: #fff;
    font-size: 14px;
font-weight: 400;
line-height: 32px;
    text-shadow: none;
    padding: 0px 10px;
    margin-top: -15px;
   ...

JavaScript

(function($) {
  $(function() {
    var K = 620; // Стоимость клиента
    var min = 1; // Клиентов
    var max = 1000; // Клиентов
    
    function calculate() {
    	var price = s1.result.from;
      var clients = s2.result.from;
      
      $('#monthly-calc').text(price.toFixed(1) + ' руб.');
      $('#monthly-cal').text(clients + ' клиентов');
    }
    
    $("#mysql").ionRangeSlider({
      type: "single",
      hide_min_max: true,
      step: min * K,
      min: min * K,
      max: max * K,
      from:0,
      postfix:" руб.",
      onChange: function (data) {
        var price = data.from;
        var clients = Math.ceil(price / K);
        
        s2.update({
        	from: clients
        });
        
        calculate();
      }
    });
    $("#disk").ionRangeSlider({
      type: "single",
      hide_min_max: true,
      step: 1,
      min: min,
      max: max,
      from: min,
      postfix:" клиентов",
      onChange: function (data) {
        var clients = data.from;
        var price = clients * K;
        
        s1.update({
        	from: price
        });
        
        calculate();
      }
    });

    var s1 = $("#mysql").data("ionRangeSlider");
    var s2 = $("#disk").data("ionRangeSlider");
    
    calculate();
  });
})(jQuery);