Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <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>
              
            
!

CSS

              
                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;

              
            
!

JS

              
                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;
    }
};
              
            
!
999px

Console