jQuery Sliders Moving at the same time - out of sync by one step -

i have following code:-

jquery

jquery('.slider').each(function() {     var $el = jquery(this);     $el.slider({         range: "max",         min: $el.data('min'),         max: $el.data('max'),         value: $el.data('value'),         step: $el.data('step'),         slide: function(event, ui) {             var percent = (100 / (jquery(this).data('max') - jquery(this).data('min'))) * jquery(this).slider('value');              jquery('.slider').not(this).each(function() {                 jquery(this).slider(                     'value',                      ((jquery(this).data('max') - jquery(this).data('min')) / 100) * percent                 );             });             jquery('.slider').each(function() {                 var thistarget = jquery(this).data('target');                 var thisvalue = jquery(this).slider('option','value');                  console.log(thistarget,thisvalue);                  jquery(thistarget+' span').html(thisvalue);             });          },     }); }); 

html

<div class="slider" data-min="3800" data-max="30000" data-value="3848" data-step="500" data-target=".calc-deposit"></div> <div class="slider" data-min="15400" data-max="120000" data-value="15393" data-step="2000" data-target=".calc-loan"></div> <div class="slider" data-min="57000" data-max="450000" data-value="57724" data-step="7500" data-target=".calc-mortgage"></div>  <div class="calc-deposit calc-center">£<span></span></div> <div class="calc-loan calc-center">£<span></span></div> <div class="calc-mortgage calc-center">£<span></span></div> 

here jsfiddle

it's working expected drag sliders, other sliders seem either step ahead or step behind depending way dragging slider.

any ideas why happening?

just delay callback of slide event, e.g:

jquery('.slider').each(function() {   var $el = jquery(this);   $el.slider({     range: "max",     min: $el.data('min'),     max: $el.data('max'),     value: $el.data('value'),     step: $el.data('step'),     slide: function(event, ui) {       cleartimeout(this.timeout);       this.timeout = settimeout(updatesliders.bind(this, event, ui))     }   }); });  function updatesliders(event, ui) {   var percent = (100 / (jquery(this).data('max') - jquery(this).data('min'))) * jquery(this).slider('value');    jquery('.slider').not(this).each(function() {     jquery(this).slider(       'value',       ((jquery(this).data('max') - jquery(this).data('min')) / 100) * percent     );   });   jquery('.slider').each(function() {     var thistarget = jquery(this).data('target');     var thisvalue = jquery(this).slider('option', 'value');      console.log(thistarget, thisvalue);      jquery(thistarget + ' span').html(thisvalue);   }); } 

updated jsfiddle