Set min value to -80 and add padding-left to the slider to let the user think that -90 is the min value.

const sliders = document.querySelectorAll("input[type=range]");

for (const slider of sliders) {
  slider.addEventListener('change', (e) => {
    e.target.nextElementSibling.value = e.target.value;
  });

  slider.nextElementSibling.value = slider.value;
}

input {
  padding-left: 15px;
}

<input type="range" min="-80" max="-20" step="15" />
<output></output>

You cannot do it by simply using HTML as -90 is lower than -20 so you cannot set min="-20" max="-80". But by using this trick you may achieve your output.

Keep the HTML as:

<input type="range" min="20" max="90" step="15"/>
<output></output>

Change your JavaScript to:

for (const slider of sliders) {
  slider.addEventListener("change", (e) => {
    e.target.nextElementSibling.value = "-" + e.target.value;
  });

  slider.nextElementSibling.value = "-" + slider.value;
}