<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="price-box">
<div class="row">
<div class="col-sm-7">
<form class="form-horizontal form-pricing" role="form">
<div class="price-slider">
<h4 class="great">Стратегия</h4>
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-primary btn-lg btn-block month active-month selected-month" id='main'>Основная</button>
</div>
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-primary btn-lg btn-block month" id='credit'>ИнвестКредит</button>
</div>
</div>
<div class="price-slider">
<h4 class="great">Сумма вклада</h4>
<span>(минимум 50 000)</span>
<div class="col-sm-12">
<div id="slider_amirol"></div>
</div>
</div>
<div class="price-slider">
<h4 class="great">Частота выплат дивидендов</h4>
<input name="sliderVal" type="hidden" id="sliderVal" value='0' readonly="readonly" />
<input name="month" type="hidden" id="month" value='main' readonly="readonly" />
<input name="term" type="hidden" id="term" value='one' readonly="readonly" />
<div class="btn-group btn-group-justified">
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-primary btn-lg btn-block term active-term selected-term" id='one'>Каждый месяц</button>
</div>
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-primary btn-lg btn-block term" id='three'>Каждые 3 месяца</button>
</div>
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-primary btn-lg btn-block term" id='six'>Каждые 6 месяцев</button>
</div>
</div>
</div>
</div>
<div class="col-sm-5">
<div class="price-form">
<div class="form-group">
<div class="row">
<div class="col-sm-12">
<label for="amount_amirol" class="control-label">Вы получите* </label>
</div>
<div class="col-sm-12">
<input type="hidden" id="amount_amirol" class="form-control">
<!-- <p class="price lead" id="total"></p> -->
<input class="price lead" name="totalprice" type="text" id="total" disabled="disabled" style="" />
</div>
<span class="help-text">*За каждый выбранный период</span>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<button type="submit" class="btn btn-primary btn-lg btn-block">Оформить <span class="glyphicon glyphicon-chevron-right"></span></button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
body {
padding-top: 30px;
}
.price-box {
margin: 0 auto;
background: #E9E9E9;
border-radius: 10px;
padding: 40px 15px;
/*width: 500px;*/
}
.ui-widget-content {
border: 1px solid #bdc3c7;
background: #e1e1e1;
color: #222222;
margin-top: 20px;
}
.ui-slider .ui-slider-handle {
position: absolute;
z-index: 2;
width: 8.2em;
height: 2.7em;
cursor: default;
margin: 0 -50px auto !important;
text-align: center;
line-height: 30px;
color: #FFFFFF;
font-size: 12px;
}
.ui-slider .ui-slider-handle .glyphicon {
color: #FFFFFF;
margin: 0 1px;
font-size: 11px;
opacity: 0.7;
}
.ui-corner-all {
border-radius: 20px;
}
.ui-slider-horizontal .ui-slider-handle {
top: 0.5em;
margin-left: -0.5em;
}
.ui-state-default,
.ui-widget-content .ui-state-default {
border: 1px solid #f9f9f9;
background: #CCA876;
}
.ui-slider .ui-slider-handle {
cursor: pointer;
}
.ui-slider a,
.ui-slider a:focus {
cursor: pointer;
outline: none;
}
.price, .lead p {
font-weight: 600;
font-size: 90px;
display: inline-block;
line-height: 60px;
text-align: center;
color: #CCA876;
border:0;
width: 100%;
background: none;
}
h4.great {
padding: 0 15px 0 0;
color: #7C7F82;
font-size: 25px;
font-weight: 100;
display: inline-block;
}
.total {
border-bottom: 1px solid #7f8c8d;
/*display: inline;
padding: 10px 5px;*/
position: relative;
padding-bottom: 20px;
}
.total:before {
content: "";
display: inline;
position: absolute;
left: 0;
bottom: 5px;
width: 100%;
height: 3px;
background: #7f8c8d;
opacity: 0.5;
}
.price-slider {
margin-bottom: 50px;
}
.price-slider span {
font-weight: 200;
display: inline-block;
color: #7f8c8d;
font-size: 13px;
}
.form-pricing {
background: #ffffff;
padding: 20px;
border-radius: 4px;
}
.price-form {
background: #ffffff;
margin-bottom: 10px;
padding: 20px;
border: 1px solid #eeeeee;
min-height: 380px;
border-radius: 4px;
/*-moz-box-shadow: 0 5px 5px 0 #ccc;
-webkit-box-shadow: 0 5px 5px 0 #ccc;
box-shadow: 0 5px 5px 0 #ccc;*/
}
.form-group {
margin-bottom: 0;
}
.form-group span.price {
font-weight: 200;
display: inline-block;
color: #7f8c8d;
font-size: 14px;
}
.help-text {
display: block;
margin-top: -10px;
margin-bottom: 17px;
color: #737373;
/*position: absolute;*/
/*margin-left: 20px;*/
font-weight: 200;
text-align: center;
}
.price-form label {
font-weight: 100;
font-size: 60px;
margin-top: -10px;
color: #7C7F82;
}
img.payment {
display: block;
margin-left: auto;
margin-right: auto
}
.ui-slider-range-min {
background: #9B7B4D;
}
.active-month,
.active-term {
background-color:#9B7B4D !important;
border-color: #9B7B4D;
}
.btn-primary {background-color:#CCA876; border-color: #9B7B4D;}
.btn-primary:hover, .btn-primary:focus, .btn-primary.focus, .btn-primary:active, .btn-primary.active{ background-color:#9B7B4D; border-color: #9B7B4D;}
/* HR */
hr.style {
margin-top: 0;
border: 0;
border-bottom: 1px dashed #ccc;
background: #999;
}
@media (min-width: 992px){
.container {width:100% !important;}}
// JavaScript Document
var p = {
0: "50 000",
1: "100 000",
2: "150 000",
3: "200 000",
4: "250 000",
5: "300 000",
6: "350 000",
7: "400 000",
8: "450 000",
9: "500 000",
10: "600 000",
11: "700 000",
12: "800 000",
13: "900 000",
14: "1 000 000",
15: "1 100 000",
16: "1 200 000",
17: "1 300 000",
18: "1 400 000",
19: "1 500 000",
20: "1 600 000",
21: "1 700 000",
22: "1 800 000",
23: "1 900 000",
24: "2 000 000",
25: "2 100 000",
26: "2 200 000",
27: "2 400 000",
28: "2 500 000",
29: "2 600 000",
30: "2 700 000",
31: "2 800 000",
32: "2 900 000",
33: "3 000 000",
34: "3 100 000",
35: "3 200 000",
36: "3 300 000",
37: "3 400 000",
38: "3 500 000",
39: "3 600 000",
40: "3 700 000",
41: "3 800 000",
42: "3 900 000",
43: "4 000 000",
44: "4 100 000",
45: "4 200 000",
46: "4 300 000",
47: "4 400 000",
48: "4 500 000",
49: "4 600 000",
50: "4 700 000",
51: "5 000 000",
52: "5 100 000",
53: "5 200 000",
54: "5 300 000",
55: "5 400 000",
56: "5 500 000",
57: "5 600 000",
58: "5 700 000",
59: "5 800 000",
60: "5 900 000",
61: "6 000 000",
62: "6 100 000",
63: "6 200 000",
64: "6 300 000",
65: "6 400 000",
66: "6 500 000",
67: "6 600 000",
68: "6 700 000",
69: "6 800 000",
70: "6 900 000",
71: "7 000 000",
72: "7 200 000",
73: "7 300 000",
74: "7 400 000",
75: "7 500 000",
76: "7 600 000",
77: "7 700 000",
78: "7 800 000",
79: "7 900 000",
80: "8 000 000",
81: "8 100 000",
82: "8 200 000",
83: "8 300 000",
84: "8 400 000",
85: "8 500 000",
86: "8 600 000",
87: "8 700 000",
88: "8 800 000",
89: "8 900 000",
90: "9 000 000",
91: "9 100 000",
92: "9 200 000",
93: "9 300 000",
94: "9 400 000",
95: "9 500 000",
96: "9 600 000",
97: "9 700 000",
98: "9 800 000",
99: "9 900 000",
100: "10 000 000",
};
var t = {
0: "50000",
1: "100000",
2: "150000",
3: "200000",
4: "250000",
5: "300000",
6: "350000",
7: "400000",
8: "450000",
9: "500000",
10: "600000",
11: "700000",
12: "800000",
13: "900000",
14: "1000000",
15: "1100000",
16: "1200000",
17: "1300000",
18: "1400000",
19: "1500000",
20: "1600000",
21: "1700000",
22: "1800000",
23: "1900000",
24: "2000000",
25: "2100000",
26: "2200000",
27: "2400000",
28: "2500000",
29: "2600000",
30: "2700000",
31: "2800000",
32: "2900000",
33: "3000000",
34: "3100000",
35: "3200000",
36: "3300000",
37: "3400000",
38: "3500000",
39: "3600000",
40: "3700000",
41: "3800000",
42: "3900000",
43: "4000000",
44: "4100000",
45: "4200000",
46: "4300000",
47: "4400000",
48: "4500000",
49: "4600000",
50: "4700000",
51: "5000000",
52: "5100000",
53: "5200000",
54: "5300000",
55: "5400000",
56: "5500000",
57: "5600000",
58: "5700000",
59: "5800000",
60: "5900000",
61: "6000000",
62: "6100000",
63: "6200000",
64: "6300000",
65: "6400000",
66: "6500000",
67: "6600000",
68: "6700000",
69: "6800000",
70: "6900000",
71: "7000000",
72: "7200000",
73: "7300000",
74: "7400000",
75: "7500000",
76: "7600000",
77: "7700000",
78: "7800000",
79: "7900000",
80: "8000000",
81: "8100000",
82: "8200000",
83: "8300000",
84: "8400000",
85: "8500000",
86: "8600000",
87: "8700000",
88: "8800000",
89: "8900000",
90: "9000000",
91: "9100000",
92: "9200000",
93: "9300000",
94: "9400000",
95: "9500000",
96: "9600000",
97: "9700000",
98: "9800000",
99: "9900000",
100: "10000000",
}
var obj = {
'main' : {
'one' : '2',
'three' : '12',
'six' : '30'
},
'credit' : {
'one' : '1.5',
'three' : '7.5',
'six' : '24'
},
};
$(document).ready(function() {
$("#total").val("50000");
$("#slider_amirol").slider({
range: "min",
animate: true,
min: 0,
max: 100,
step: 1,
slide:
function(event, ui)
{
update(1,ui.value); //changed
calcualtePrice(ui.value);
}
});
$('.month').on('click',function(event) {
var id = $(this).attr('id');
$('.month').removeClass('selected-month');
$(this).addClass('selected-month');
$(".month").removeClass("active-month");
$(this).addClass("active-month");
$('#month').val(id);
calcualtePrice()
});
$('.term').on('click',function(event) {
var id = $(this).attr('id');
$('.term').removeClass('selected-term');
$(this).addClass('selected-term');
$(".term").removeClass("active-term");
$(this).addClass("active-term");
$('#term').val(id);
calcualtePrice()
});
update();
calcualtePrice();
});
function update(slider,val) {
if(undefined === val) val = 0;
var amount = p[val];
$('#sliderVal').val(val);
$('#slider_amirol a').html('<label><span class="glyphicon glyphicon-chevron-left"></span> '+amount+' <span class="glyphicon glyphicon-chevron-right"></span></label>');
}
function calcualtePrice(val){
if(undefined === val)
val = $('#sliderVal').val();
var month = $('#month').val();
var term = obj[month][$('#term').val()];
var totalPrice = t[val]*term;
$("#total").val(Math.round((totalPrice)/100));
}
