wp.customize.bind('ready', function () {
	'use strict';

	const rangeControls = document.querySelectorAll('.multi-range-control');

	rangeControls.forEach(function (control) {
		const slider = control.querySelector('.multi-range-control-slider');
        const text = control.querySelector('.multi-range-control-input');
		const reset = control.querySelector('.multi-range-control-reset');

		slider.addEventListener('input', function () {
			if (parseInt(slider.value) !== parseInt(text.value)) {
				text.value = slider.value;
				text.dispatchEvent(new CustomEvent('change'));
			}
		});

		text.addEventListener('input', function () {
			if (parseInt(slider.value) !== parseInt(text.value)) {
				slider.value = text.value;
			}
		});

		reset.addEventListener('click', function (event) {
            event.preventDefault();
            const resetTo = parseInt(reset.dataset.value);
            if (resetTo || resetTo === 0) {
				slider.value = resetTo;
				text.value = resetTo;
                text.dispatchEvent(new CustomEvent('change'));
            }
		});
	});
});
