Drawing HTML range/slider through Javascript renders incorrectly

Following this tutorial I created a double range slider. I have slightly adapted it to look like this:

<div class="range_container">
  <div class="form_control">
    <div class="form_control_container">
      <input class="form_control_container__time__input" type="number" id="fromInput" value="-150" min="-150" max="0"/>
    </div>
    <div class="form_control_container">
      <div>RSSI</div>
    </div>
    <div class="form_control_container">
      <input class="form_control_container__time__input" type="number" id="toInput" value="0" min="-150" max="0"/>
    </div>
  </div>
  <div class="sliders_control">
    <input id="fromSlider" type="range" value="-150" min="-150" max="0"/>
    <input id="toSlider" type="range" value="0" min="-150" max="0"/>
  </div>
</div>

The result is OK:

However, if I generate the same through JS, I get the following formatting:

The problem is that no matter what I tried, the “fromSlider” always has its slider/thumb below the range. I’ve played with z-index but so far no avail. Does anyone have a suggestion how I can resolve this issue?

The code I used to generate this:

  const quantitiesConfig = {
    "rssi": { "nice": "RSSI", "absMin": -150, "relMin": -120, "relMax": -70, "absMax":  0, "unit": "dBm", "decimals": 1, "step": 1 }
  };

  const container = document.getElementById('filter-container');

  Object.entries(quantitiesConfig).forEach(([atrb, cfg]) => {
    // Inject slider markup
    container.innerHTML += `
      <div class="range_container" id="range_container-${atrb}">
        <div class="form_control">
          <div class="form_control_container">
            <input class="form_control_container__time__input" type="number" id="fromInput-${atrb}" 
              value="${cfg.absMin}" min="${cfg.absMin}" max="${cfg.absMax}" step="${cfg.step}" />
          </div>
          <div class="form_control_container">
            <div>${cfg.nice}</div>
          </div>
          <div class="form_control_container">
            <input class="form_control_container__time__input" type="number" id="toInput-${atrb}" 
              value="${cfg.absMax}" min="${cfg.absMin}" max="${cfg.absMax}" step="${cfg.step}" />
          </div>
        </div>
        <div class="sliders_control">
          <input id="fromSlider-${atrb}" type="range" value="${cfg.absMin}" min="${cfg.absMin}" max="${cfg.absMax}" step="${cfg.step}" />
          <input id="toSlider-${atrb}" type="range" value="${cfg.absMax}" min="${cfg.absMin}" max="${cfg.absMax}" step="${cfg.step}" />
        </div>
      </div>
    `;

    // Select elements
    const fromSlider = document.getElementById(`fromSlider-${atrb}`);
    const toSlider = document.getElementById(`toSlider-${atrb}`);
    const fromInput = document.getElementById(`fromInput-${atrb}`);
    const toInput = document.getElementById(`toInput-${atrb}`);

    // Ensure sliders are properly drawn initially
    fillSlider(fromSlider, toSlider, '#C6C6C6', '#0074D9', toSlider);
    setToggleAccessible(toSlider);

    // Attach event listeners
    fromSlider.addEventListener('input', () => controlFromSlider(fromSlider, toSlider, fromInput));
    toSlider.addEventListener('input', () => controlToSlider(fromSlider, toSlider, toInput));
    fromInput.addEventListener('input', () => controlFromInput(fromSlider, fromInput, toInput, toSlider));
    toInput.addEventListener('input', () => controlToInput(toSlider, fromInput, toInput, toSlider));
  });

The latter functions are as defined from the tutorial except a changed colour and slightly modified function

  function setToggleAccessible(currentTarget) {
    const toSlider = document.querySelector('#toSlider');
    if (Number(currentTarget.value) <= currentTarget.min ) {
      toSlider.style.zIndex = 2;
    } else {
      toSlider.style.zIndex = 0;
    }
  }