jQuery sliders calculator
Hi I want to create some sliders, what i need to do is to make a slider which has 3 options in it:
- the am开发者_开发技巧ount the user wants to borrow (from 12,500 upto 100,000) - will display a value from where the selector is here
over how long (from five yrs upto 25yrs) - will display a value from where the selector is here
Estimate based on the values the monthly repayment.
i have looked at others on here but don't quite understand how they work logically so if anyone could help would be great.
I have added a quick image i made to dropbox: http://dl.dropbox.com/u/12506430/sliders.jpg
Demo here.
<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();
}
});
精彩评论