Zikri Fadzil Zikri Fadzil - 1 year ago 52
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"
<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 onclick="calcTotal()">an input or a tag here</div>
.each(function () {
var input = $(this);
.bind("slider:ready slider:changed", function (event, data) {

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 Source

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;