title: How to make input sliders not overlap each other?
body: <p>There is this code, in it I set the minimum indent between the sliders using rangeGap. Everything seems to work as it should, but they continue to run into each other. Maybe someone can tell me what is wrong.</p>
  <p>I can't figure out if it's the positioning of the elements or if I need to change the logic in the js. It should work like this, but the thumbs should not move each other when colliding: <a href="https://codepen.io/BabylonJS/pen/gqzBWx" rel="nofollow noreferrer">https://codepen.io/BabylonJS/pen/gqzBWx</a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const progressBar = document.querySelector('.slider--progress');
  const inputMin = document.querySelector('.input--min');
  const inputMax = document.querySelector('.input--max');
  const inputRange = [inputMin, inputMax];
  
  const 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 &lt; rangeGap) {
        if (e.target.className === 'input--min') {
          inputRange[0].value = maxValue - rangeGap;
        } else if (e.target.className === '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 + '%';
      }
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>*,
  *::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 &gt; 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;
    background: rgb(107, 216, 107);
    border-radius: 50%;
    border: 1px solid rgb(42, 138, 42);
    pointer-events: auto;
    -webkit-appearance: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="UTF-8" /&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
      &lt;link rel="stylesheet" href="style.css" /&gt;
      &lt;title&gt;Double-range slider&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div class="slider"&gt;
        &lt;div class="slider--body"&gt;
          &lt;div class="slider--progress"&gt;&lt;/div&gt;
          &lt;div class="slider--inputs"&gt;
            &lt;input type="range" class="slider--input input--min" min="0" , max="999999" step="10" value="250000" /&gt;
            &lt;input type="range" class="slider--input input--max" min="0" , max="999999" step="10" value="750000" /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;script src="double-range-slider.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>