jquery - jQuery スライダー計算機

Question

こんにちは、いくつかのスライダーを作成したいのですが、3 つのオプションを持つスライダーを作成する必要があります。

1. ユーザーが借りたい金額 (12,500 から 100,000 まで) - セレクターがここにある場所からの値が表示されます

2. 期間 (5 年から 25 年まで) - セレクターがここにある場所からの値を表示します

3. 毎月の返済額をもとに試算。

私はここで他の人を見てきましたが、それらが論理的にどのように機能するかをよく理解していないので、誰かが助けてくれれば素晴らしいでしょう.

ドロップボックスに作成した簡単な画像を追加しました: http://dl.dropbox.com/u/12506430/sliders.jpg

Answer 1

ここでデモ。

<h2>How much would you like to borrow?</h2>
<div id="amount"></div>

<h2>Over how long?</h2>
<div id="period"></div>

<h2>Result</h2>
Your monthly payment will be $<span id="monthly">204.86</span>


function update() {
    var amount = $('#amount').slider('value');
    var period = $('#period').slider('value');
    var monthly = (amount + amount * 0.03 * period) / (period * 12);
    $("#monthly").text(monthly.toFixed(2));

}

$("#amount").slider({
    value: 12500,
    min: 12500,
    max: 100000,
    step: 50,
    slide: function() {
        update();
    }
});

$("#period").slider({
    value: 5,
    min: 5,
    max: 25,
    step: 1,
    slide: function() {
        update();
    }
});