RRC RRC - 4 months ago 17
jQuery Question

jquery getting value of two different sliders and perform a calculation

I've got two sliders with their own values and properties:
http://i.stack.imgur.com/3OZqr.gif




What I'm trying to do is get the values of these two sliders and perform a calculation that will be displayed next to the interest label. The calculation is: pounds*0,008*days.




I apologize for the messy code as I'm still a beginner.

HTML

<div class="section">
<p>
<label for="amount1">£</label>
<input type="text" id="amount1" />
</p>
<div id="Slider1"></div>
<p>
<label for="amount2">Days</label>
<input type="text" id="amount2" />
</p>
<div id="Slider2"></div>
<p>
<label for="borrow">Borrowing</label>
<input type="text" id="borrow">

<label for="interests">+ Interest</label>
<input type="text" id="interests">
</p>
<button onClick="totalinterest()">Try</button>
<p id="interests"></p>
</div>


JS

$(function getslider1(pounds) {
$("#Slider1").slider({
max: 400,
min: 50,
value: 200,
range: false,
slide: function(event, ui) {
var pounds = $("#amount1").val(ui.value);
$("#borrow").val(ui.value);
return pounds;
}
});
document.getElementById("amount1").textContent;
});

$(function getslider2(days) {
$("#Slider2").slider({
max: 30,
min: 1,
value: 30,
range: false,
slide: function(event, ui) {
var days = $("#amount2").val(ui.value);
//("#interests").val(ui.value);
return days;
}
});
document.getElementById("amount2").textContent;
});

$(function totalinterest() {
var int = (getslider1 * 0.008);
var tint = (int * getslider2);
//$("#interests").val(tinterest);
var total = tint.valueOf();
document.getElementById("interests").innerHTML = total;
});

Answer

Hi my friend.

Without the button Use this and the value of interests automatically do calculations

$('#Slider1').mouseup(function(){
    var pounds = $( "#Slider1" ).slider( "option", "value" );
var days = $( "#Slider2" ).slider( "option", "value" );
var total= pounds*0.008*days;
      document.getElementById("interests").value = total;
    }, function(){
    var pounds = $( "#Slider1" ).slider( "option", "value" );
var days = $( "#Slider2" ).slider( "option", "value" );
var total= pounds*0.008*days;
      document.getElementById("interests").value = total;
});


$('#Slider2').mouseup(function(){
    var pounds = $( "#Slider1" ).slider( "option", "value" );
var days = $( "#Slider2" ).slider( "option", "value" );
var total= pounds*0.008*days;
      document.getElementById("interests").value = total;
    }, function(){
    var pounds = $( "#Slider1" ).slider( "option", "value" );
var days = $( "#Slider2" ).slider( "option", "value" );
var total= pounds*0.008*days;
      document.getElementById("interests").value = total;
});

And if you want to use the button try this

HTML button

<button id="btntot">Try</button>

JS

$('#btntot').click(function(){
    var pounds = $("#amount1").val();
  var days = $("#amount2").val();
  var total = pounds*0.008*days;
  document.getElementById("interests").value = total;
});