3 つの jquery-ui スライダーを使用してローンの計算をしようとしています。
パラメータは次のとおりです。
借入金額
期間/返済月数
利率
スライダーを変更しながら、次の値を表示したいと思います。
月々の金額+金利
(借入金額÷月額=実績+(実績×金利))総借入額+総金利。
(借入総額+(借入総額×金利))
現在、スライダーしかありませんが、それらを接続してこれらの値を計算して表示することはできませんでした。あなたの助けにとても感謝しています。
ここにフィドルがあります
http://jsfiddle.net/L65u9spv/
Javascript:
$(function() {
$( "#slider-toloan" ).slider({
range: "min",
value: 25000,
min: 5000,
max: 400000,
step: 5000,
slide: function( event, ui ) {
$( "#amount" ).val( "$" + ui.value );
}
});
$( "#amount" ).val( "$" + $( "#slider-toloan" ).slider( "value" ) );
$( "#slider-loanduration" ).slider({
range: "min",
value: 5,
min: 1,
max: 25,
step: 1,
slide: function( event, ui ) {
$( "#duration" ).val( ui.value );
}
});
$( "#duration" ).val( $( "#slider-loanduration" ).slider( "value" ) );
$( "#slider-rate" ).slider({
range: "min",
value: 1.85,
min: 1.75,
max: 23,
step: 0.05,
slide: function( event, ui ) {
$( "#rate" ).val( ui.value );
}
});
$( "#rate" ).val( $( "#slider-rate" ).slider( "value" ) );
});
HTML:
<p>
<label for="amount">Amount to Loan:</label>
<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider-toloan"></div>
<p>
<label for="duration">Duration Months:</label>
<input type="text" id="duration" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider-loanduration"></div>
<p>
<label for="rate">Interest Rate</label>
<input type="text" id="rate" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider-rate"></div>
<br /><br />
<p>To pay monthly (interest rate included): ?</p>
<span style="font-size:11px;">amount to loan / amount of months = result + (result * interest rate) </span>
<br />
<p>Total amount to pay all months (interest rate included): ?</p>
<span style="font-size:11px;">Total loan amount + (total loan amount * interest rate)</span>