<link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script>
$(document).ready(function(){
var vloj =25000;
var proc = 0.135;
var srok = 3;
var dohodnost = 0;
var poluchi = 0;
var korzina = 0;
var sumpop = 0;
var i = 0;
var arr1 = [];
var procentnakop = 0;
var summaitog = 0;
var popolnil = 0;
var znach1 = 0;
var znach2 = 0;
//Добавляем ползунок 1
$(".t-input-group:eq(0)").append("<div id='slider1'></div>");
//Добавляем подписи к 1 ползунку
$(".t-input-group:eq(0)").append("<div class='metka1'>25 000</div>");
$(".t-input-group:eq(0)").append("<div class='metka2'>3 000 000</div>");
//Добавляем ползунок 2
$(".t-input-group:eq(2)").append("<div id='slider2'></div>");
//Добавляем подписи к 2 ползунку
$(".t-input-group:eq(2)").append("<div class='metka1'>0</div>");
$(".t-input-group:eq(2)").append("<div class='metka2'>500 000</div>");
//Перемещаем кнопку
//Убираем кнопку формы..
$(".t-form__submit").empty();
$("#rec48935116").appendTo(".t-form__submit");
//Очищаем поля для месяцев
$(".t-input-group_in .t-input-block").empty();
//Добавляем кнопки месяцев
$(".t-input-group_in .t-input-block").append("<div class='mont1 mont'>3</div><div class='mont2 mont'>6</div><div class='mont3 mont'>9</div><div class='mont4 mont'>12</div><div class='mont5 mont'>24</div><div class='mont6 mont'>36</div>");
//ДОбавляем итоговы поля
$(".t690 .t-form__submit").prepend("<div class='label1'>Вы получите</div><div class='label2'>Застраховано</div><div class='itog'>25844₽</div><div class='procent'>Ставка: <span>13,50%</span></div><div class='dohod'>Доход: <span>844₽</span></div>")
//ДОбавляем подпись под формой
$("#form48808476").append("<div class='podpisi'>* расчет не является офертой. Расчет произведен по программе «Ежегодный доход».<br> Точный расчет по договору предоставляется в офисах продаж.</div>");
function checkall(){
//Функция итого
while (i < srok) {
sumpop = popolnil*i;
poluchi = ((vloj+sumpop)*proc*1)/12;
arr1[i]=poluchi;
i++;
};
i = 0;
procentnakop = parseInt(eval(arr1.join("+")));
summaitog = vloj + sumpop + procentnakop;
summaitog= summaitog.toFixed();
dohodnost = poluchi - vloj;
$(".itog").html(summaitog + ' ₽');
$(".dohod>span").html(procentnakop + ' ₽');
arr1.length=0;
};
//Меняем кол-во месяцев при клике на кнопки
$('.mont1').click(function(){srok=3});
$('.mont2').click(function(){srok=6});
$('.mont3').click(function(){srok=9});
$('.mont4').click(function(){srok=12});
$('.mont5').click(function(){srok=24});
$('.mont6').click(function(){srok=36});
//Клик по месяцам
$(".mont1").addClass("montac");
$('.mont').click(function(){
$(".mont").removeClass("montac");
$(this).addClass("montac");
checkall();
});
$( "#slider1" ).slider({
value : 25000,//Значение, которое будет выставлено слайдеру при загрузке
min : 25000,//Минимально возможное значение на ползунке
max : 3000000,//Максимально возможное значение на ползунке
step : 1,//Шаг, с которым будет двигаться ползунок
create: function( event, ui ) {
val = $( "#slider1" ).slider("value"); //При создании слайдера, получаем его значение в перемен. val
$( "[name='razmest']" ).val( val + ' \u20BD' ); //Заполняем этим значением элемент поля
},
slide: function( event, ui ) {
$("[name='razmest']" ).val( ui.value + ' \u20BD' );//При изменении значения ползунка заполняем элемент поля
vloj = ui.value;
checkall();
//Фон для ползунка
$(".t-input:eq(0)").css("background" , "#ffffff");
}
});
$( "#slider2" ).slider({
value : 0,//Значение, которое будет выставлено слайдеру при загрузке
min : 0,//Минимально возможное значение на ползунке
max : 500000,//Максимально возможное значение на ползунке
step : 1,//Шаг, с которым будет двигаться ползунок
create: function( event, ui ) {
val = $( "#slider2" ).slider("value");//При создании слайдера, получаем его значение в перемен. val
$( "[name='popoln']" ).val( val + ' \u20BD' );//Заполняем этим значением элемент поля
},
slide: function( event, ui ) {
$("[name='popoln']" ).val( ui.value + ' \u20BD' );//При изменении значения ползунка заполняем элемент поля
popolnil = ui.value;
checkall();
}
});
//Разрешить ввод только цифр в полях ввода
$("[name='razmest'] , [name='popoln']").bind("change keyup input click", function() {
if (this.value.match(/[^0-9]/g)) {
this.value = this.value.replace(/[^0-9]/g, '');
};
});
//Настройки 1 ползунка
//При нажатии клавиш в ползунке 1
$('.t-input:eq(0)').keyup( function() {
znach1 = $(this).val();
//Присваиваем значение ползунку
$("#slider1").slider("value", znach1);
//Ограничиваем кол-во цифр
if($(this).val().length > 7){
$(this).val($(this).val().substr(0, 7));
};
//Если больше , то пишем предел
if (znach1>3000000){
$( "[name='razmest']" ).val(3000000);
};
vloj = $("#slider1").slider("value");
checkall();
//Фон для ползунка
if ( znach1<25000 ){
$(this).css("background" , "#c4d1d1");
}else {
$(this).css("background" , "#ffffff");
};
});
//Настройки 2 ползунка
//При нажатии клавиш в ползунке 2
$('.t-input:eq(1)').keyup( function() {
znach2 = $(this).val();
//Присваиваем значение ползунку
$("#slider2").slider("value", znach2);
//Ограничиваем кол-во цифр
if($(this).val().length > 6){
$(this).val($(this).val().substr(0, 6));
};
//Если больше , то пишем предел
if (znach2>500000){
$( "[name='popoln']" ).val(500000);
};
popolnil = $("#slider2").slider("value");
checkall();
});
});
</script>
<style>
.ui-slider-handle {
width: 15px !important;
height: 15px !important;
border-radius: 15px 15px 15px 15px !important;
-webkit-border-radius: 15px 15px 15px 15px !important;
background: -webkit-linear-gradient(top, #e4cc3d, #fee664) !important;
background: -o-linear-gradient(top, #e4cc3d, #fee664) !important;
background: -ms-linear-gradient(top, #e4cc3d, #fee664) !important;
background: linear-gradient(top, #e4cc3d, #fee664) !important;
border: none !important;
top: 50% !important;
margin-top: -7px !important;
margin-left: -1px !important;
cursor: pointer !important;
outline: none !important;
}
.ui-widget {
font-size: 0.1em !important;
}
/*Отступы слайдера*/
#slider1 , #slider2{
margin-right: 20px;
margin-top: 15px;
}
/*Позиция для подписей слайдеров*/
.metka1 {
position: absolute;
font-family: Roboto;
color: #bdbdbd;
font-size: 12px;
margin-top: 10px;
}
/*Позиция для подписей слайдеров*/
.metka2 {
float: right;
margin-right: 20px;
font-family: Roboto;
color: #bdbdbd;
font-size: 12px;
margin-top: 10px;
}
/*Вертикальное положение элементов*/
.t690 .t-input-group {
vertical-align: top !important;
}
/*Эффект кнопки при наведении*/
#rec48935116 .t-btn:not(.t-animate_no-hover):hover {
}
/*Плавность эффекта для кнопки*/
.t142__submit {
transition:all 0.3s cubic-bezier(0, 0, 0.8, 1.0) !important;
}
/*Настройки месяцев*/
.mont {
background: #ececec;
float: left;
padding: 8px;
box-shadow: 0px 1px 3px 0px #5d5d5d;
font-family: Roboto;
color: #3c3c3c;
font-size: 12px;
margin-top: 10px;
}
/*Настройки месяцев при наведении*/
.mont:hover , .montac {
background: #79d800;
color:#ffffff;
cursor:pointer;
}
/*Настройки подложки для формы*/
#form48808476 {
background: rgba(253, 253, 254, 0.8);
padding: 50px 50px 50px 50px;
border-radius: 30px;
box-shadow: 3px 3px 0px 1px #7ACBFA;
border: 1px solid #b5b5b5;
}
/*Настройки месяцев отступ*/
.t-input-group_in {
padding-left: 60px !important;
}
/*Настройки месяцев*/
.mont1 {
border-radius: 7px 0px 0px 7px;
}
/*Настройки месяцев*/
.mont6 {
border-radius: 0px 7px 7px 0px;
}
/*Настройка блока с кнопкой*/
.t690 .t-form__submit {
box-shadow: 0px 0px 20px 0px #cecece;
background: #f0f2ff;
border-radius: 30px;font-family: Roboto;
color: #3c3c3c;
font-size: 12px;
padding: 10px 10px 20px 10px;
}
/*Итоги внешний вид*/
.label1 {
float: left;
font-size: 16px;
font-weight: 700;
margin: 10px 0 0 15px;
padding: 3px;
color: #5d5d5d;
}
.label2 {
float: right;
font-size: 16px;
font-weight: 200;
color: #ffffff;
background: #7ACBFA;
margin: 10px 10px 0 0;
border-radius: 10px;
padding: 3px;
}
.itog {
clear: both;
text-align: center;
color: #8dde26;
font-size: 30px;
font-weight: 800;
padding-top: 15px;
padding-bottom: 10px;
}
.procent {
float: left;
font-size: 16px;
margin: 10px 0 0 15px;
padding: 3px;
color: #5d5d5d;
}
.dohod {
float: right;
font-size: 16px;
color: #5d5d5d;
margin: 10px 10px 0 0;
border-radius: 10px;
padding: 3px;
}
.procent span , .dohod span{
font-weight: 700;
}
/*Подпись под формой*/
.podpisi{
font-family: Roboto;
color: #bdbdbd;
font-size: 12px;
margin-top: -30px;
}
/*Высота полей ввода*/
.t-input {
height: 40px !important;
}
/*Ширина блоков*/
.t690 .t-input-group {
width: 40% !important;
}
@media screen and (max-width: 1200px){
.t-input-group_in {
padding-left: 20px !important;
}
}
@media screen and (max-width: 960px){
.t-input-group_in {
margin-top: 50px;
padding-left: 0px;
}
[data-input-lid="1495122982159"] {
margin-top: 70px;
}
.podpisi {
margin-top: 30px;
}
.t690 .t-input-group {
width: 100% !important;
}
.t690 .t-form__submit {
margin-top:50px;
width: 100% !important;
}
.t690 .t-col_12{
width: 450px !important;
}
.t690 .t-container {
max-width: 450px !important;
}
}
@media screen and (max-width: 450px){
.t690 .t142__submit {
font-size: 14px;
font-weight: 200;
margin-top: 20px;
height: 50px;
line-height: 20px !important;
padding-top: 10px !important;
padding-bottom: 10px !important;
}
}
</style>