Как заставить сумму следовать за ползунком?

let sheet = document.createElement('style'),
  $rangeInput = $('.range input'),
  prefs = ['webkit-slider-runnable-track', 'moz-range-track', 'ms-track'];

$rangeMin = $rangeInput.attr('min');
$rangeMax = $rangeInput.attr('max');

document.body.appendChild(sheet);

function numberWithCommas(x) {
  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

let getTrackStyle = function(el) {
  let curVal = el.value,
    val = Math.floor(curVal * 100 / $rangeMax),
    style = '';

  $('#quantity_coins').val(curVal + ' K');
  $('#coins').text(numberWithCommas(curVal * 1000));

  $('.range-labels li').removeClass('active selected');

  let curLabel = $('.range-labels').find('li[data-value="' + curVal + '"]');
  let countLabel = $('.dsc').find('li[data-value="' + curVal + '"]');

  curLabel.addClass('active selected');
  curLabel.prevAll().addClass('selected');
  countLabel.prevAll().css('opacity', '1');


  $.each($('.range-labels li'), function(i, val) {
    if (curVal > $(val).data('value')) {
      $(this).addClass('selected');
    }
  });
  $.each($('.dsc span'), function(i, val) {
    if (curVal <= $(val).data('value') + 10 && curVal >= $(val).data('value')) {
      $(this).css('opacity', '1');
    } else {
      $(this).css('opacity', '0');
    }
  });

  // Change background gradient
  for (let i = 0; i < prefs.length; i++) {
    style += '.range {background: linear-gradient(to right, #EC1FF2 0%, #EC1FF2 ' + val + '%, transparent ' + val + '%, transparent 100%)}';
    style += '.range input::-' + prefs[i] + '{background: linear-gradient(to right, #EC1FF2 0%, #EC1FF2 ' + val + '%, #333333 ' + val + '%, #333333 100%)}';
  }
  let coins_need = $('#coins-count').val();
  let discount = calculate_discount(coins_need);
  let price = Math.ceil(coins_need / 10 * rate * discount);
  let sell = Math.ceil(price - ((price * (1 - discount) * 100) / 100));
  $('#order-discount').text(Math.floor((1 - discount) * 100) + "%");
  $("#coins-price").text(price);
  $("#coins-sell").text(sell);
  let sw = screen.width;
  return style;
}

function calculate_discount(coins) {
  if (coins < 500) {
    $('#coins-price').css("display", "none");
    $('#rub-old').css("display", "none");
  } else {
    $('#coins-price').css("display", "block");
    $('#rub-old').css("display", "block");
  }
  switch (true) {
    case (coins >= 500 && coins < 1000):
      discount = 0.05;
      break;
    case (coins >= 1000 && coins < 1500):
      discount = 0.06;
      break;
    case (coins >= 1500 && coins < 2000):
      discount = 0.07;
      break;
    case (coins >= 2000 && coins < 2500):
      discount = 0.08;
      break;
    case (coins >= 2500 && coins < 3000):
      discount = 0.09;
      break;
    case (coins >= 3000 && coins < 3500):
      discount = 0.1;
      break;
    case (coins >= 3500 && coins < 4000):
      discount = 0.11;
      break;
    case (coins >= 4000 && coins < 4500):
      discount = 0.12;
      break;
    case (coins >= 4500 && coins < 5000):
      discount = 0.13;
      break;
    case (coins == 5000):
      discount = 0.15;
      break;
    default:
      discount = 0;
      break;
  }
  console.log(discount);
  return 1 - discount;
  console.log(discount);
}

$rangeInput.on('input', function() {
  sheet.textContent = getTrackStyle(this);
});

// Change input value on label click
$('.range-labels li').on('click', function() {
  $rangeInput.val($(this).data('value')).trigger('input');
  calculate_price($('#quantity_coins').val());

});

function calculate_price(value) {
  let val = Math.ceil(Number(value.replace(/\D+/g, "")) / 10) * 10;
  if (val > 5000) val = 5000;
  let price = val / 10 * rate;
  $("#coins-price").text(price);

  $(this).val(val + ' K');
}

$(document).ready(function() {
  let coins = $('#quantity_coins');
  coins.val(coins.val() + ' K');

  let price = $('#coins-count').val() / 10 * rate;
  $("#coins-price").text(price);
  $rangeInput.trigger('input');

  coins.on('change', function() {
    let val = Math.ceil(Number($(this).val().replace(/\D+/g, "")) / 10) * 10;
    calculate_price($(this).val());
    $rangeInput.val($(this).val()).trigger('input');
  });

  coins.on('focus', function() {
    let val = $(this).val();
    $(this).val(Number(val.replace(/\D+/g, "")));
  });

  coins.on('focusout', function() {
    let val = $(this).val();
    $(this).val(Number(val.replace(/\D+/g, "")) + ' K');
  });
});


function validate(evt) {
  var theEvent = evt || window.event;
  var key = theEvent.keyCode || theEvent.which;
  key = String.fromCharCode(key);
  var regex = /[0-9]|\./;
  if (!regex.test(key)) {
    theEvent.returnValue = false;
    if (theEvent.preventDefault) theEvent.preventDefault();
  }
}

html {}

*:focus {
  outline: none;
}

@media (min-width: 1200px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl {
    max-width: 1170px;
  }
}

.container-with-imgs-short,
.container-with-imgs-long {
  position: relative;
}

.container-with-imgs-short:before,
.container-with-imgs-short:after {
  position: absolute;
  content: '';
  top: 50%;
  transform: translateY(-50%);
  width: 220px;
  height: 280px;
  display: block;
}

.container-with-imgs-long:before,
.container-with-imgs-long:after {
  position: absolute;
  content: '';
  top: 40%;
  width: calc(44px * 5);
  height: calc(71px * 5);
  display: block;
  z-index: 11;
}

@media (max-width: 992px) {
  .container-with-imgs-short:before,
  .container-with-imgs-short:after,
  .container-with-imgs-long:before,
  .container-with-imgs-long:after {
    display: none;
  }
}

.container .mobile-img-wrapper {
  display: none;
}

.container .mobile-img-wrapper img {
  width: 100%;
  height: auto;
}

@media (max-width: 576px) {
  .container .mobile-img-wrapper {
    display: block;
  }
  ul.mx-auto {
    opacity: 0;
  }
}

.buy_coins-block .input_quantity input:focus {
  box-shadow: 0px 0px 0px 2px #fff;
}

.buy_coins-block textarea.input_quantity {
  min-height: 125px;
  width: 100%;
  background: rgba(255, 255, 255, .1);
  border: 2px solid #fac260;
  color: #fff;
  text-transform: uppercase;
  padding: 15px;
  font-size: 18px;
  border-radius: 3px;
  text-transform: unset;
}

#count_coins .input_quantity:after,
.with_fut:after {
  content: 'FUT';
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'DIN Pro Cond';
  font-style: italic;
  font-weight: bold;
  font-size: 13px;
  line-height: 22px;
  display: block;
  height: 24px;
  width: 25px;
  padding-right: 1px;
  margin: auto;
  border-radius: 50%;
  color: #828282;
  border: 1px solid #828282;
  text-align: center;
  background: #1a1a1a;
}

.with_fut {
  position: relative;
}

.buy_coins-block input[type=text]::placeholder {
  color: rgba(255, 255, 255, .3);
}

#count_coins .price_rub {
  font-weight: bold;
  color: #fff;
  font-size: 85px;
  padding: 30px 10px;
}

.range {
  position: relative;
  width: 100%;
  height: 5px;
  margin-top: 10px;
  border-radius: 50px;
}

.range input {
  width: 100%;
  position: absolute;
  top: 1px;
  left: 0;
  right: -3px;
  height: 0px;
  -webkit-appearance: none;
  z-index: 10;
}

.range input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin: -6px 0 0;
  border-radius: 50%;
  background: #EC1FF2;
  cursor: pointer;
  border: 0 !important;
}

.range input::-moz-range-thumb {
  width: 18px;
  height: 18px;
  margin: -8px 0 0;
  border-radius: 50%;
  background: #EC1FF2;
  cursor: pointer;
  border: 0 !important;
}

.range input::-ms-thumb {
  width: 18px;
  height: 18px;
  margin: -8px 0 0;
  border-radius: 50%;
  background: #EC1FF2;
  cursor: pointer;
  border: 0 !important;
}

.range input::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px;
  cursor: pointer;
  /* background: none; */
  background: #333333;
}

.range input::-moz-range-track {
  width: 100%;
  height: 4px;
  cursor: pointer;
  background: #333333;
}

.range input::-ms-track {
  width: 100%;
  height: 4px;
  cursor: pointer;
  background: #333333;
}

.range input:focus {
  background: none;
  outline: none;
}

.range input::-ms-track {
  width: 100%;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}

.range-labels {
  margin: -4px -55px 0px;
  padding: 11px 20px;
  list-style: none;
}

.range-labels li {
  position: relative;
  float: left;
  width: calc(100% / 11);
  text-align: center;
  color: #b2b2b2;
  font-size: 14px;
  cursor: pointer;
}

.range-labels li::before {
  content: "";
  position: absolute;
  top: -13px;
  right: 0;
  left: 0;
  margin: 0 auto;
  width: 4px;
  height: 4px;
  background: #fff;
  border-radius: 50%;
  z-index: 10;
}

.range-labels li:last-child {
  /* margin-left: 0px; */
  /* text-align: right; */
  /* padding-left: 3%; */
}

.range-labels li:last-child:before {
  /* left: 15px; */
}

.range-labels .active,
.range-labels .selected {
  color: #EC1FF2;
  font-size: 10px;
}

.range-labels .selected::before {
  background: transparent;
}

.range-labels .active.selected::before {
  display: none;
}

.progress {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 30px;
  height: 8px;
  width: 100%;
}

.progress-bar {
  background-color: #44FFC9;
}

span.coins_icon {
  height: 20px;
  width: 20px;
  display: inline-block;
  background: url('/storage/fut_small_icon.svg');
  color: #766318;
  text-align: center;
  line-height: 30px;
  border-radius: 50%;
  margin-right: 8px;
}

span.coins {
  margin-right: 10px;
}

span.avatar_icon {
  height: 30px;
  width: 30px;
  display: inline-block;
  background: url('/storage/avatar.svg');
  /* color: #777;
    text-align: center; */
  /* line-height: 30px; */
  border-radius: 50%;
  margin-right: 15px;
}


/* span.avatar_icon:before {
    content: "\f007";
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
} */

@media (max-width: 768px) {
  .range-labels {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .range-labels li {
    width: calc(100% / 14);
    text-align: center;
    font-size: 10px;
  }
  .s500 {
    transform: translateX(-20px);
    z-index: 999;
  }
  .s1m {
    transform: translateX(-50px);
    z-index: 999;
  }
  .s2m {
    transform: translateX(-30px);
    z-index: 999;
  }
  .ft {
    transform: translateX(11px);
    z-index: 999;
  }
  .df1 {
    transform: translateX(-30px);
  }
  .df2 {
    transform: translateX(-16px);
  }
  .df5 {
    transform: translateX(5px);
  }
  .hid {
    position: absolute;
  }
  .discaundet {
    display: block;
    height: 10px;
    width: 100%;
  }
  .discaundet p {
    display: none;
  }
  .dsc {
    width: 90%;
    float: right;
    transform: translateY(-10px);
  }
  .set_coins {
    padding-top: 15px;
  }
  .dsc span {
    display: block;
    position: relative;
  }
}

<head>
  <link href="http://futbuy.net/css/bootstrap.min.css" rel="stylesheet">
  <link href="http://futbuy.net/css/bootstrap-five-columns.css" rel="stylesheet">
  <link href="http://futbuy.net/css/font-awesome.min.css" rel="stylesheet">
  <link href="http://futbuy.net/css/jquery.fancybox.min.css" rel="stylesheet" />
  <link href="http://futbuy.net/css/main.css" rel="stylesheet">
</head>



<div class="secondary-bg container-fluid" id="buy_coins-count">

  <div class="container container-with-imgs-long">
    <div class="row justify-content-center">
      <form class="col-md-12" method="POST" action="">


        <div class="col mt-5 main-col-anyway">
          <div class="col-md-8 col-lg-8 text-center set_coins" id="count_coins">
            <div class="discaundet">

              <div class="dsc">
                <script>
                  if (screen.width > 992) {
                    document.write('<span data-value="10">0%</span><span data-value="500">5%</span><span data-value="1000">6%</span><span data-value="1500" class="hid">7%</span><span data-value="2000">7%</span><span data-value="2500" class="hid">8%</span><span data-value="3000">9%</span><span data-value="3500" class="hid">10%</span><span data-value="4000">12%</span><span data-value="4500" class="hid">13%</span><span data-value="5000">15%</span>');
                  } else {
                    document.write('<span data-value="10" class="firstsell">0%</span><span data-value="500" class="">5%</span><span data-value="1000" class="df1">6%</span><span data-value="2000" class="df2">7%</span><span data-value="3000" class="df2">9%</span><span data-value="4000" class="df2">12%</span><span data-value="5000" style="margin-right: -70px" class="df5">15%</span>');
                  }
                </script>

              </div>

            </div>
            <div class="range">
              <input id="coins-count" type="range" min="10" max="5000" step="10" value="10">
            </div>
            <ul class="range-labels">
              <script>
                if (screen.width > 992) {
                  document.write('<li data-value="10" class="selected">10K</li><li data-value="500" class="selected ">500K</li><li data-value="1000" class="selected">1М</li><li data-value="1500" class="selected hid">1.5М</li><li data-value="2000" class="selected">2М</li><li data-value="2500" class="selected hid">2.5М</li><li data-value="3000" class="selected">3М</li><li data-value="3500" class="selected hid">3.5М</li><li data-value="4000" class="selected">4М</li><li data-value="4500" class="selected hid">4.5М</li><li data-value="5000" class="selected">5М</li>');
                } else {
                  document.write('<li data-value="10" class="selected">10K</li><li data-value="500" class="selected s500">500K</li><li data-value="1000" class="selected s1m">1М</li><li data-value="2000" class="selected s2m">2М</li><li data-value="3000" class="selected s2m">3М</li><li data-value="4000" class="selected s2m">4М</li><li data-value="5000" class="selected">5М</li>');
                }
              </script>
            </ul>







            <script>
              let rate = '{{$rate}}';
            </script>
            <script src="https://plentz.github.io/jquery-maskmoney/javascripts/jquery.maskMoney.min.js" type="text/javascript"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
            <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
            <script src="https://plentz.github.io/jquery-maskmoney/javascripts/jquery.maskMoney.min.js" type="text/javascript"></script>

            <script>
              let rate = '95';
            </script>
            <script src="https://plentz.github.io/jquery-maskmoney/javascripts/jquery.maskMoney.min.js" type="text/javascript"></script>
            <script type="text/javascript" src="http://futbuy.net/js/count_coins.js" async></script>
            <div id="vk_community_messages"></div>
            <script type="text/javascript" src="https://vk.com/js/api/openapi.js?162" async></script>

            <script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>

            <script>
              if (window.matchMedia("(max-width: 768px)").matches) {
                $('#advantages_block .row').slick({
                  dots: true,
                  adaptiveHeight: true
                });
              }
              $('a[href*="#"]').not('[href="#"]').not('[href="#0"]').click(function(event) {
                if (
                  location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') &&
                  location.hostname == this.hostname
                ) {
                  var target = $(this.hash);
                  target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');

                  if (target.length) {
                    event.preventDefault();

                    $('html, body').animate({
                      scrollTop: target.offset().top
                    }, 1000, function() {
                      var $target = $(target);
                      $target.focus();

                      if ($target.is(":focus")) {
                        return false;
                      } else {
                        $target.attr('tabindex', '-1');
                        $target.focus();
                      };
                    });
                  }
                }
              });
              $(document).ready(function() {
                $('button.navbar-toggler').click(function() {
                  $('body .secondary-bg > .container, body .main-bg > .container').toggleClass('blur');
                });


              });
            </script>