fos,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body {
font-family: sans-serif;
font-size: 12px;
}
.amount{
font-size: 22px;
font-weight: bold;
border:none;
color: #ff5555;
background: none;
}
.slider{
width: 300px;
margin: 20px;
}
.radio {
display: inline;
}
.opt [type="checkbox"] + *{
display: none;
}
.opt :checked + *{
display: block;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>
$(function() {
var data = [
[50, 500, 25],
[1, 6, 1],
[0, 6, 1],
[0, 500, 5]
];
function out() {
var x = $('[name="xradio"]:checked').index('[name="xradio"]') || 0;
x = [30, 50, 100][x];
var p = $(".opt .amount");
var p1 = +p[0].value;
var min = 1;
if (p1 > 100 && p1 < 175) min = 2;
/* */
$(".slider").eq(1).slider("option", {
"value": Math.max(p[1].value, min),
"min": min
});
var y = p[1].value * 900;
var z = p[2].value * 1800;
var w = p[3].value * 10;
$(".res").html(p1 * x + y + z + w)
}
$(".opt").each(function(i, el) {
var d = data[i],
am = $(".amount", el),
sl = $(".slider", el),
c = $('[type="checkbox"]',
el);
sl.slider({
min: d[0],
max: d[1],
step: d[2],
slide: function(event, ui) {
am.val(ui.value)
},
change: function(event, ui) {
am.val(ui.value)
},
stop: out
});
sl.slider("option", "value", d[0]);
if (c.length) c.on("click", function() {
!this.checked && sl.slider("option", "value", 0);
out()
})
});
$('[name="xradio"]').on("click", out)
});
</script>
</head>
<body>
<div class="radio">
<label><input type="radio" name="xradio" value="40" checked>RADIO1</label>
<label><input type="radio" name="xradio" value="50">RADIO2</label>
<label><input type="radio" name="xradio" value="100">RADIO3</label></div>
<div class="opt">
<div class="slider"></div>
<input type="text" class="amount" readonly>
</div>
<div class="opt">
<div class="slider"></div>
<input type="text" class="amount" readonly>
</div>
<div class="opt">
<input type="checkbox" >
<div class="slider"></div>
<input type="text" class="amount" readonly>
</div>
<div class="opt">
<input type="checkbox" >
<div class="slider"></div>
<input type="text" class="amount" readonly>
</div>
<div class="res">0</div>
</body>
</html>
|