<div class="calculate">
  <div class="calculate-wrap">
    <div class="calculate-top">
    <div class="calculate-amount">
      Contract amount
    </div>
    <p class="calculate-text">$<input type="text" id="text" class="calculate-input"></input></p>
  </div>
  </div>
  <div class="calculate-slider">
    <div id="slider"></div>
  </div>
  <div class="calculate-inner">
    <div class="calculate-block">
      <p>Payouts currency</p>
      <p><span>USDT</span></p>
    </div>
    
    <div class="calculate-block">
      <p>Contract term</p>
      <p><span>365 days</span></p>
    </div>
    
     <div class="calculate-block">
        <p>Potential income</p>
        <p><span>$<span id="prop">2,2000</span></span></p>
     </div>
    
    <div class="calculate-block">
      <p>Annual income</p>
      <p><span id="income">112%</span></p>
   </div>
  </div>
  <div class="calculate-btn-wrapper">
    <a href="#" class="calculate-btn">Buy contract now</a>
</div>
</div>
body {
  background: #F3F7FC;
}
.c-50 {
  background-image: linear-gradient(-37deg, #A67F66 0%, #C49A7F 19%, #A2795E 40%, #A47C62 66%, #EBC5A4 100%);
border-radius: 20px 20px 0 0;
border-radius: 20px 20px 0px 0px;
}

.c-150 {
  background-image: linear-gradient(-50deg, #9FA6AC 0%, #868C94 40%, #C4CBD1 79%, #B3BBC0 100%);
border-radius: 20px 20px 0 0;
border-radius: 20px 20px 0px 0px;
}

.c-250 {
  background-image: linear-gradient(-25deg, #EFDA86 0%, #C69637 40%, #FEF2AE 79%, #D3CC72 100%);
border-radius: 20px 20px 0 0;
border-radius: 20px 20px 0px 0px;
}

.c-500 {
background-image: linear-gradient(-50deg, #70BEFF 0%, #6999DA 40%, #BAE2FF 79%, #D3E9F8 100%);
}

.c-50,
.c-150,
.c-250,
.c-500
  width 100%
  height 100%
  display flex
  flex-direction column 
  align-items center
  justify-content center

.calculate
  text-align center
  background-color #fff
  padding-bottom 20px
  &-wrap 
    height 140px
    display flex
    flex-direction column 
    align-items center
  &-amount 
    color rgba(255, 255, 255, .6)
    font-size 14px
    font-weight 400
    font-family Roboto, sans-serif
    line-height 26px
  &-text 
    color #fff 
    font-weight 700
    font-family Roboto, sans-serif
    font-size 45px
    margin 0
  &-input
    background transparent
    border none 
    color #fff 
    font-weight 700
    font-family Roboto, sans-serif
    font-size 45px
    max-width 170px
    outline none
    width 154px
    text-align center
  &-slider
    padding 0 60px
  &-inner 
    display flex
    justify-content space-between
    padding 0 90px
  &-block
    font-size 14px
    font-family "Roboto", sans-serif
    font-weight 400
    color #A1AFC3
    text-align center
    line-height 26px
    span 
      font-weight 700
      font-size 25px
      color #1a273a
  &-btn
    font-family "Roboto", sans-serif 
    font-weight 700
    text-decoration none
    text-transform uppercase
    color #fff
    background-color black
    width 324px
    display inline-block
    padding 15px
    border-radius 10px
    &-wrapper 
      margin 20px 0
      
 .noUi-handle
   background #0085FF
   box-shadow 0 11px 19px 0 rgba(12,71,124,0.48)
   border-radius 50%
   border none
   outline none
   cursor pointer
   &:before 
     width 20px
     height 20px
     border-radius 50%
     top 50%
     left 50%
     transform translate(-50%, -50%)
   &:after
     display none
 
 .noUi-horizontal .noUi-handle
   width 52px
   height 52px
   top -21px
     
 .noUi
   &-target
     background #A1AFC3
     border none
     box-shadow none
     outline none
   &-connects
     border-radius 10px
   &-connect
     background #0085FF
   &-horizontal
     .noUi-tooltip
        font-weight 700 
        font-size 14px
        color #1a273a 
        line-height 26px
        text-align center
        background: #FFFFFF;
        box-shadow: 0 11px 28px 0 rgba(255,255,255,0.3)
        padding 5px 11px
        border none 
        border-radius 20px
        text-transform uppercase
        font-family "Roboto", sans-serif
        &:after
          position: absolute;
          content: '';
          width: 10px;
          height: 10px;
          left: 50%;
          transform: translateX(-50%) rotate(45deg);
          bottom: -5px;
          background: white;
View Compiled
let slider = document.getElementById('slider');
let background = document.querySelector('.calculate-top');
let procentBlock = document.getElementById('income');
let calculateBtn = document.querySelector('.calculate-btn');
let value = document.getElementById("text");
let prop = document.getElementById('prop');
let inputs = [value];
noUiSlider.create(slider, {
    start: [500],
    connect: [true, false],
    range: {
        'min': 50000,
        'max': 500000
    },
    step: 5000,
    format: {
      from: function(value) {
            return Math.round(+value);
        },
      to: function(value) {
            return Math.round(+value);
        }
    },
    tooltips: {
        to: function() {
            let numb = +value.value;
            var tooltip = document.querySelector('.noUi-tooltip');
            return result = (numb < 144999) ? tooltip.textContent = 'Bronze' :
                (numb < 244999) ? tooltip.textContent = 'Silver' :
                (numb < 494999) ? tooltip.textContent = 'Gold' :
                (numb >= 495000) ? tooltip.textContent = 'Diamond' : '';

        }
    }
});


function color(classBlock, text, color, proportions) {
  background.className = classBlock;
  procentBlock.textContent = text + '%';
  calculateBtn.style.backgroundColor = color;
  prop.textContent = proportions * text / 100;
}

slider.noUiSlider.on('update', function (values, handle) {
    inputs[handle].value = values[handle];
})

slider.noUiSlider.on('update', function (values, handle) {
    value.innerHTML = values[handle];
    let result = (values[handle] < 149999) ? color('c-50', 118, '#A37A60', values[handle]) :
                 (values[handle] < 249999) ? color('c-150', 120, '#96A6B9', values[handle]) :
                 (values[handle] < 499999) ? color('c-250', 122, '#DFBA4B', values[handle]) :
                 (values[handle] == 500000) ? color('c-500', 125, '#6B9FE0', values[handle]) : ''
});

inputs.forEach(function(input, handle) {

    input.addEventListener('change', function() {
        slider.noUiSlider.setHandle(handle, this.value);
    });

    input.addEventListener('keydown', function(e) {

        var values = slider.noUiSlider.get();
        var value = Number(values[handle]);

        // [[handle0_down, handle0_up], [handle1_down, handle1_up]]
        var steps = slider.noUiSlider.steps();

        // [down, up]
        var step = steps[handle];

        var position;

        // 13 is enter,
        // 38 is key up,
        // 40 is key down.
        switch (e.which) {

            case 13:
                stepsSlider.noUiSlider.setHandle(handle, this.value);
                break;

            case 38:

                // Get step to go increase slider value (up)
                position = step[1];

                // false = no step is set
                if (position === false) {
                    position = 1;
                }

                // null = edge of slider
                if (position !== null) {
                    stepsSlider.noUiSlider.setHandle(handle, value + position);
                }

                break;

            case 40:

                position = step[0];

                if (position === false) {
                    position = 1;
                }

                if (position !== null) {
                    stepsSlider.noUiSlider.setHandle(handle, value - position);
                }

                break;
        }
    });
});

let calcInput = document.getElementById('text');
calcInput.onkeydown = function(e) {
    if ((e.which >= 48 && e.which <= 57) // numbers
        ||
        (e.which >= 96 && e.which <= 105) // num lock
        ||
        e.which == 8 // backspace
        ||
        (e.which >= 37 && e.which <= 40) // arrows
        ||
        e.which == 46 || e.which == 13) // delete and enter
    {
        return true;
    } else {
        return false;
    }
};

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/14.0.2/nouislider.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/14.0.2/nouislider.min.js