JSFiddle - React, Tailwind, and code Playground

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>

JavaScript

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);
	  });
	}