JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" class="amount1" />

<div class="container">
    <div id="slider1"></div>
</div>

<input type="text" class="amount2" />

<div class="container">
    <div id="slider2"></div>
</div>

<div class="sonuccontainer">
    <div class="bilgilendirme">aylık ödeme miktarınız</div>
    <input type="text" class="amount3" />
</div>

CSS

.ui-slider { position: relative; text-align: left; background: yellow; -webkit-border-radius:7px; -moz-border-radius:7px; border-radius:7px; -webkit-box-shadow: inset 1px 1px 2px 0 rgba(0, 0, 0, 0.5); box-shadow: inset 1px 1px 2px 0 rgba(0, 0, 0, 0.5)}


.ui-slider .ui-slider-handle { outline-color: transparent; background: blue; position: absolute; top: -8px; left: -8px; z-index: 2;  border-radius: 70px;  width: 30px; height:30px; cursor: pointer; }


.ui-slider .ui-slider-range { -webkit-border-radius:7px; -moz-border-radius:7px; border-radius:7px; -webkit-box-shadow: inset 1px 1px 2px 0 rgba(0, 0, 0, 0.5); box-shadow: inset 1px 1px 2px 0 rgba(0, 0, 0, 0.5)width: 100px; background: yellow; position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; }




.amount1
{
    width: 15px;
    color: blue;
    font-weight: bold;
    border: none;
}
.amount2
{
    width: 35px;
    color: blue;
    font-weight: bold;
    border: none;
}
.amount3
{
    margin-left: 10px;
    color: blue;
    font-weight: bold;
    width: 150px;
    border: none;
}
.container
{
    width: 150px;
    height: 50px;
    margin-left: 100px;
}

.sonuccontainer
{
    float: left;
    width: 400px;
    height: 50px;
}
.bilgilendirme
{
    margin-top: 4px;
    float: left;
}

JavaScript

$(document).ready(function(){
    
    $(function() {
        $( "#slider1" ).slider({
          range: "min",
          value: 36,
          min: 12,
          max: 36,
          slide: function( event, ui ) {
            $( ".amount1" ).val( ui.value);
              writesum();
          }
        });
        $( ".amount1" ).val($( "#slider1" ).slider( "value" ));
      });
    
    $(function() {
        $( "#slider2" ).slider({
          range: "min",
          value: 50000,
          min: 1,
          max: 50000,
          slide: function( event, ui ) {
            $( ".amount2" ).val( ui.value );
              writesum();
          }
        });
        $( ".amount2" ).val( $( "#slider2" ).slider( "value" ));
      });
    
    
    function writesum() {
      var months = $('.amount1').val();
      var credits = $('.amount2').val();
      var payment = parseFloat(Number(credits) / Number(months))
      var rounded = payment.toFixed(2);
          $('.amount3').val(rounded);
    }
    
   

});