enable209,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style type="text/css">
.sliderIn{
margin:20px;
width:500px;
height:5px;
}
.ui-slider-handle{
border-radius:50%;
position:relative;
font-size:14px;
display:block;
}
.ui-slider-horizontal .ui-slider-handle{
top:0.5em;
background:transparent;
border-radius:0%;
width:0;
height:0;
border-top:none;
text-decoration:none;
border-left:7px solid transparent;
border-right:7px solid transparent;
border-bottom:14px solid red;
}
.ui-slider-horizontal .ui-slider-handle:last-of-type{
background:transparent;
border-bottom:none;
border-top:14px solid red;
top:-1.2em;
}
.ui-slider-horizontal .ui-slider-handle:last-of-type:focus {
outline: 0;
}
.active {
background-color: #0000CD;
color: #FFFFFF;
}
.priceList span {
border-radius: 8px;
padding: 2px 8px;
cursor: pointer;
border: 1px solid #0000CD
}
</style>
</head>
<body><section class="howToEarn">
<div class="res">
<h1>Калькулятор <span class="din_bold">скважины</span></h1>
<div class="calculator"><form>
<div class="calcBox">
<span class="cbTitle">Введите исходные данные</span>
<div class="cbLine">
<span class="cblTitle">Глубина скважины, м.</span>
<div>
<div class="inCount"></div>
<div class="sliderBox bbox sliderIn"></div>
<div class="priceList"> <span>0 м.</span> <span>50 м.</span> <span>100 м.</span> <span>150 м.</span></div>
</div>
</div>
<div class="procBox">
<span class="pbTitle">Тип трубы:</span>
<div class="radioList">
<label><input class="niceRadio" type="radio" name="tube" value="1600" checked>Металл ⌀133</label>
<label><input class="niceRadio" type="radio" name="tube" value="1900" >Металл ⌀133 + Пластик ⌀117</label>
</div>
</div>
<br>
<br>
<div class="procBox">
<span class="pbTitle">Тип обустройства:</span>
<div class="radioList">
<label><input class="niceRadio" type="radio" name="proc" value="35500" checked>Летний </label>
<label><input class="niceRadio" type="radio" name="proc" value="100000" >Металлический кессон </label>
</div>
</div>
</div>
<input type="hidden" name="user_data[url]" value="landing_opt_real" />
</form></div>
<div class="investedReceived">
<div class="invested">
<div class="interBox"><div class="textBox">Стоимость скважины : <span id="inMon">20 000 руб.</span></div></div>
</div><br>
<div class="received">
<div class="interBox"><div class="textBox">Стоимость обустройства : <span id="outMon">53 000 руб.</span></div></div>
</div>
<div class="clear"></div>
<p class="month12">Итого:</p>
<span class="summ" id="sumMon">636 000 руб.</span>
<a class="popup_t want but din_bold" href="javascript:void(0)">Хочу заказать</a>
</div>
</div>
</section>
<script>
jQuery(function() {
var c = {
0: 0,
50: 1,
100: 2,
150: 3
},
a = $(".priceList span");
$(".sliderIn").slider({
max: 150,
min: 0,
step: 1,
value: 0,
range: "min",
slide: function(f, b) {
$(".inCount").html(b.value + " м.");
var d = b.value * $(".procBox:first input:checked").val(),
e = +$(".procBox:last input:checked").val();
$("#inMon").text(d + " руб.");
$("#outMon").text(e + " руб.");
$("#sumMon").text(d + e + " руб.");
a.removeClass("active");
void 0 !== c[b.value] && a.eq(c[b.value]).addClass("active")
},
change: function(f,
b) {
$(".inCount").html(b.value + " м.");
var d = b.value * $(".procBox:first input:checked").val(),
e = +$(".procBox:last input:checked").val();
$("#inMon").text(d + " руб.");
$("#outMon").text(e + " руб.");
$("#sumMon").text(d + e + " руб.");
a.removeClass("active");
void 0 !== c[b.value] && a.eq(c[b.value]).addClass("active")
}
});
$(".sliderIn").slider("option", "value", 0);
$(".calculator input").on({
click: function() {
var a = +parseInt($(".inCount").html()) || 0;
$(".sliderIn").slider("option", "value", a)
}
});
a.on({
click: function() {
var c = a.index(this);
$(".sliderIn").slider("option", "value", 50 * c)
}
})
});
</script>
</body>
</html>
