Добрый день!
Есть калькулятор с ползунком.
Задача поставить кнопки + и - чтобы при нажатии на них положение ползунка менялось на шаг++
Подскажите как это сделать?
Вот код калькулятора:
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style type="text/css">
div.demo { padding: 10px !important; width: 1000px;}
.ui-widget{font-size: 0.6em !important;}
</style>
<script>
$(function() {
$( "#slider-range-max" ).slider({
range: "max",
min: 5,
max: 500,
value: 1,
step: 0.5,
slide: function( event, ui ) {
$( "#amount" ).val( ui.value );
calc();
}
});
$( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) );
});
$(function() {
$( "#slider-range-max2" ).slider({
range: "max",
min: 6,
max: 120,
value: 12,
slide: function( event, ui ) {
$( "#amount2" ).val( ui.value );
calc();
}
});
$( "#amount2" ).val( $( "#slider-range-max2" ).slider( "value" ) );
});
function calc(par){
amount = document.cl_form.amount.value;
amount2 = document.cl_form.amount2.value;
//var summ;
summ = 0.01 * Number(amount) * 1000 ;
summ2 = 0.02 * Number(amount) * Number(amount2) ;
summ = summ.toFixed(0);
summ2 = summ2.toFixed(2);
document.cl_form.summ.value=summ;
document.cl_form.summ.value=summ2;
//document.getElementById("amounttd").innerHTML=amount;
//document.getElementById("amount2td").innerHTML=amount2;
document.getElementById("summ").innerHTML=summ;
document.getElementById("summ2").innerHTML=summ2;
return false;
}
</script>
</head>
<body>
<form name="cl_form">
<div class="demo">
<p>
<label for="amount">Сумма займа:</label>
<input type="text" id="amount" onchange="calc(this.value);" style="border:0; color:#f6931f; font-weight:bold; font-size: 24px; width:100px; text-align: center;" />
<label for="amount">млн. руб.</label>
</p>
<div id="slider-range-max"></div><a href="#" onclick="document.getElementById("amount").value=10; calc(document.getElementById("amount").value);">+</a>
<p>
<label for="amount2">Срок займа:</label>
<input type="text" id="amount2" onchange="calc(this.value);" style="border:0; color:#f6931f; font-weight:bold; font-size: 24px; width:100px; text-align: center;" />
<label for="amount2">мес.</label>
</p>
<div id="slider-range-max2"></div>
<p>
<label for="summ">ВАШ ПЛАТЕЖ:</label>
<input value="0" name="summ" readonly="readonly" maxlength="10" size="5" type="hidden">
<input value="0" name="summ2" readonly="readonly" maxlength="10" size="5" type="hidden">
</p>
<p>
<!-- Вывод значений на ползунках
ВНИМАНИЕ для работы раскомментировать текст в скрипте
1st: <p id="amounttd">0</p>
2nd: <p id="amount2td">0</p>
-->
платеж: <span id="summ">50</span> тыс. рублей<br />
сумма: <span id="summ2">1.20</span> млн. рублей
</p>
</div>
</form>
</body>
</html>
