jQuery Slider - Moving Sliders at the same time

I have three sliders as follows:-

<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> 


$('.slider').each(function() {
    var $el = $(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) {
            $($el.data('target')).html('£' + ui.value);

            // place code here which will execute when *any* slider moves
        }
    });
});

What I want to do is regardless of which slider you use, they all increase at the same time.

All three sliders have different increments so they need to update accordingly.

Any help would be much appreciated.

Example

Here is one way using the stop and change event:-

$('.slider').each(function() {
  var $el = $(this);
  $el.slider({
    range: "max",
    min: $el.data('min'),
    max: $el.data('max'),
    value: $el.data('value'),
    step: $el.data('step'),
    stop: function(event, ui) {
      var percent = (100 / ($(this).data('max') - $(this).data('min'))) * $(this).slider('value');
      $('.slider').not(this).each(function() {
        $(this).slider('value', (($(this).data('max') - $(this).data('min')) / 100) * percent);
      });
    },
    change: function(event, ui) {
      $($el.data('target')).html('£' + ui.value);
    }
  });
});

FIDDLE