jquery UI slider, не могу разобраться с взаимодействием двух слайдеров
Здравствуйте. используя jquery UI slider, пытаюсь смастерить калькулятор. В настоящий момент имею простую версию с 2мя слайдерами. Слайдерами можно выбирать некую сумму, в результате сумма с двух слайдеров суммируется и выдается на экран.
У каждого из слайдеров есть минимальное и максимальное значение. Например, минимальное значение первого слайдера может быть 500000, а максимальное 2500000. Минимальное значение второго слайдера может быть 0, максимальное 2500000. Задача: Как сделать так, что бы максимальное значение второго сладера зависило от выбранного значения первого ? Например, если значение первого слайдера выставлено больше 1000000, то максимальное значение второго слайдера становилось бы не 2500000, а 3000000, и конечно при уменьшении значения (меньше 1000000 на первом слайдере) становилось снова 2500000. И возможно ли это ? Спасибо! То что есть: http://disk.tom.ru/lkg6mjn Листинг:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>Calc</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="index_files/jquery-ui-1.css">
<style type="text/css">
#calculator{
margin-left:20px;
width: 240px;
}
#calculator h1{
font-family:Arial, Helvetica, sans-serif;
font-size: 18px;
}
#calculator h2{
padding:6px;
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
border:1px solid orange;
border-radius:4px;
}
.ui-slider{
height: 6px;
}
.ui-slider-range{
background: orange;
}
.ui-slider-handle{
height: 12px !important;
width: 12px !important;
}
#summary{
position: relative;
clear: both;
}
</style>
<script type="text/javascript" src="index_files/jquery-1.js"></script>
<script type="text/javascript" src="index_files/jquery-ui-1.js"></script>
<script type="text/javascript" src="index_files/jquery.js"></script>
<script type="text/javascript">
//<![CDATA[
$(init);
function init(){
$("#carprice-slider").slider({
range: "min",
value: 1300000,
min: 500000,
max: 2500000,
step:50000,
slide: function( event, ui ) {
S = ui.value;
$("#carprice h2").html('Стоимость автомобиля: ' + $.format.number(S,'#,###,###') + ' руб');
$(summ(S,f));
}
});
$("#income-slider").slider({
range: "min",
value: 500000,
min: 0,
max: 2500000,
step:50000,
slide: function( event, ui ) {
f = ui.value;
$("#income h2").html('Первоначальный взнос: ' + $.format.number(f,'#,###,###') + ' руб');
$(summ(S,f));
}
});
var S = $("#carprice-slider").slider('value');
var f = $("#income-slider").slider('value');
$(summ(S,f));
}
function summ(S,f){
var A;
A = parseInt(Math.round(S + f));
$("#summary h2").html('Ежемесячный платеж: ' + $.format.number(A,"#,###,###") + ' руб');
}
//]]>
</script>
</head>
<body>
<div id="calculator">
<h1>Кредитный калькулятор</h1>
<div id="carprice">
<h2>Стоимость автомобиля: 1,300,000 руб</h2>
<div class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" id="carprice-slider">
<div style="width: 40%;" class="ui-slider-range ui-widget-header ui-slider-range-min"></div><a style="left: 40%;" class="ui-slider-handle ui-state-default ui-corner-all" href="#"></a></div>
</div>
<div id="income">
<h2>Первоначальный взнос: 500,000 руб</h2>
<div class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" id="income-slider">
<div style="width: 20%;" class="ui-slider-range ui-widget-header ui-slider-range-min"></div><a style="left: 20%;" class="ui-slider-handle ui-state-default ui-corner-all" href="#"></a></div>
</div>
<div id="summary">
<h2>Ежемесячный платеж: 20,290 руб</h2>
</div>
</div>
</body></html>
|
| Часовой пояс GMT +3, время: 18:10. |