I’m using this double range slider as an example. https://jsfiddle.net/qh74xvc0/

  <div class="slider">
      <div class="slider--body">
        <div class="slider--progress"></div>
        <div class="slider--inputs">
          <input type="range" class="slider--input input--min" min="0" , max="999999" step="10" value="250000" />
          <input type="range" class="slider--input input--max" min="0" , max="999999" step="10" value="750000" />
        </div>
      </div>
    </div>

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  background: rgb(107, 216, 107);
}

.slider {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  margin-top: 50px;
  height: 30px;
  width: 500px;
  padding: 15px 10px;
  border-radius: 10px;
  background: rgb(42, 138, 42);
}

.slider--body {
  background: rgb(250, 250, 250);
  height: 4px;
  width: 100%;
  position: relative;
  border-radius: 5px;
}

.slider--progress {
  position: absolute;
  left: 25%;
  right: 25%;
  background: rgb(107, 216, 107);
  height: 4px;
  border-radius: 10px;
}

.slider--inputs {
  position: relative;
}

.slider--inputs > input {
  pointer-events: none;
}

.slider--input {
  position: absolute;
  top: -2.4px;
  left: -3px;
  height: 5px;
  width: calc(100% + 2px);
  background: none;
  -webkit-appearance: none;
}

.slider--input::-webkit-slider-thumb {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid rgb(42, 138, 42);
  pointer-events: auto;
  -webkit-appearance: none;
  background: rgb(107, 216, 107);
}

const progressBar = document.querySelector('.slider--progress');
const inputRange = document.querySelectorAll('.slider--input');

let rangeGap = 50000;

inputRange.forEach(function (el) {
  el.addEventListener('input', function (e) {
    let minValue = parseInt(inputRange[0].value);
    let maxValue = parseInt(inputRange[1].value);
    if (maxValue - minValue < rangeGap) {
      if (e.target.classList.contains('input--min')) {
        inputRange[0].value = maxValue - rangeGap;
      } else if (e.target.classList.contains('input--max')) {
        inputRange[1].value = minValue + rangeGap;
      }
    } else {
      progressBar.style.left = (minValue / inputRange[0].max) * 100 + '%';
      progressBar.style.right = 100 - (maxValue / inputRange[1].max) * 100 + '%';
    }
  });
});

Basically, the min/max values of the double ranger are dynamic. The rangeGap distance should be also dynamic. and not set to a constant value

I’m struggling to calculate the rangeGap between elements if min/max changes.

So far i tried using getBoundingClientRect to calculate the collision, however I need to set the gap before detecting collision

let div1 = document.getElementById('div1').getBoundingClientRect();
let div2 = document.getElementById('div2').getBoundingClientRect();

function touching(d1,d2){
    let ox = Math.abs(d1.x - d2.x) < (d1.x < d2.x ? d2.width : d1.width);
    let oy = Math.abs(d1.y - d2.y) < (d1.y < d2.y ? d2.height : d1.height);
    return ox && oy;
}

Any ideas to get me into the right path ?