Javascript dual slider: don’t let the right slider push the left one

I have a simple dual slider as seen below.

The left slider can not push the right slider any more to the right as intended, but the right slider pushes the left slider to the left and I don’t know how to prevent this.

What am I missing?

      // Elements for the sliders and display
      const minSlider = document.getElementById("minL");
      const maxSlider = document.getElementById("maxL");
      const rangeDisplay = document.getElementById("rangeDisplay");

      // Update the display and enforce slider constraints
      function updateSliders() {
        let minL = parseInt(minSlider.value);
        let maxL = parseInt(maxSlider.value);

        // Prevent the minSlider from exceeding maxSlider's value
        if (minL > maxL) {
          minSlider.value = maxL;
          minL = maxL;
        }

        // Update the displayed range
        rangeDisplay.textContent = `${minL} - ${maxL}`;
      }

      // Attach input event listeners for live updating
      minSlider.addEventListener("input", updateSliders);
      maxSlider.addEventListener("input", updateSliders);

      // Initial display update
      updateSliders();
  .slider-container {
      position: relative;
      width: 100%;
      max-width: 400px;
      height: 20px;
  }

  #minL, #maxL {
      position: absolute;
      width: 100%;
      pointer-events: none;
  }

  #minL::-webkit-slider-thumb, #maxL::-webkit-slider-thumb {
      pointer-events: auto;
      height: 18px;
      width: 18px;
      background-color: #333;
      cursor: pointer;
  }
    <div id="controls">
      <label>Range: <span id="rangeDisplay">0 - 70</span></label>
      <div class="slider-container">
        <input type="range" id="minL" min="0" max="360" value="0" step="1">
        <input type="range" id="maxL" min="0" max="360" value="70" step="1">
      </div>
    </div>
  </body>
</html>