switching price range and slider’s places

hello again,

i’ve tried several iterations of JS, PHP and JQ for the output of the price range and slider to switch places (slider below the text boxes). It’s not very ergonomic on mobile to have the slider on the top, where your thumb is covering the price.

i cannot figure out a way to make this work. here’s my most recent attempt:

<script type="text/javascript">
  document.addEventListener('DOMContentLoaded', function() {
    // Get references to the elements you want to move
    const irsElement = document.querySelector("span.irs.irs--flat.js-irs-0.irs-with-grid");
    const wpfPriceInputs = document.querySelector("div.wpfPriceInputs");

    // Check if both elements exist before moving
    if (irsElement && wpfPriceInputs) {
      // Move irsElement just below wpfPriceInputs
      wpfPriceInputs.insertAdjacentElement('afterend', irsElement);
    }
  });
</script>

any guidance would be greatly appreciated

The page I need help with: [log in to see the link]