<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;
}
};