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


Comments

Popular posts from this blog

android - Why am I getting the message 'Youractivity.java is not an activity subclass or alias' -

python - How do I create a list index that loops through integers in another list -

c# - “System.Security.Cryptography.CryptographicException: Keyset does not exist” when reading private key from remote machine -