Zikri Fadzil Zikri Fadzil - 2 months ago 12
jQuery Question

How to get multiple data from simple slide

I'm just a starter in using the Jquery Simple-Slider and I do need the knowledge of how to obtain like two sliders to calculate the total of both of them in a function.Below is part of the sample I tried doing :

<div id="result"></div>
<p>Bookeeper's salary (per month)</p>
<div class="row">
<div class="col-sm-12">
<input style="padding-bottom:10px;" type="text" data-slider="true" value="0" data-slider-highlight="true" data-slider-range="0,10000" data-slider-step="1"
id="salary">
</div>
</div>
<br>
<p>Average working days (per month)</p>
<div class="row">
<div class="col-sm-12">
<input type="text" data-slider="true" value="0" data-slider-highlight="true"
data-slider-range="0,31" data-slider-step="1" id="avgdays">
</div>
</div>
<div onclick="calcTotal()">an input or a tag here</div>
-------script-------
$(document).ready(function(){
$("[data-slider]")
.each(function () {
var input = $(this);
$("<span>")
.addClass("output")
.insertAfter($(this));
})
.bind("slider:ready slider:changed", function (event, data) {
$(this)
.nextAll(".output:first")
.html(data.value.toFixed(3));
});


-------function--------
function calcTotal(){
//get the value from slider and put it in the total variable
var total = salary value + average value;
document.getElementbyId('result').innerHTML = total;
}

Answer

As I obtained my answer and could have made it useful for other people with same problem as me so I decided to answer my own question instead of editing my question. So to add to the coding is I've made a bootstrap modal that contains that div with the id="result" so I'm just going to list the script only.

$('#salary').bind("slider:changed", function(event, data){
   //get the value of id salary when slider is moved
   salary = data.value;
});

$('#avgdays').bind("slider:changed", function(event, data){
   //get the value of id avgdays when slider is moved
   avgdays = data.value;
});

//when modal is open shoot the function
$('#myModal').on("shown.bs.modal", function(){
   document.getElementById('result').innerHTML = calcTotal();
});

//declare the variable of total
var total;
//function for calculating the total
function calcTotal(){
   total = salary + avgdays;
   return total;
}
Comments