<main>
  <form id="form">
    <h1>Vælg en værdi</h1>
    <label for="slider">Volume</label>
    <div class="slider-group">
      <input id="slider" type="range" value="0" min="0" max="100" name="slider" />
      <output for="slider" id="slider-value">0</output>
    </div>
    <button type="submit">Submit</button>
  </form>
  <section>
    <h2>Output</h2>
    <p>Valgt værdi: <span id="output"></span></p>
  </section>
</main>

const form = document.querySelector("#form");
const sliderInput = form.querySelector("#slider");
const sliderValue = form.querySelector("#slider-value");
const output = document.querySelector("#output");

function updateHeadingValue() {
  form.style.setProperty("--val", sliderInput.valueAsNumber + "%");
  sliderValue.value = sliderInput.valueAsNumber;
}

function handelSubmit(event) {
  event.preventDefault();
  const formData = new FormData(form);
  const sliderValue = +formData.get("slider");
  let message;
  if (sliderValue < 30) {
    message = "Low volume";
  } else if (sliderValue < 70) {
    message = "Medium volume";
  } else {
    message = "High volume";
  }
  // output.textContent = message;
  output.innerHTML = `<span><meter value="${sliderValue}" min="0" max="100" low="29" high="70" optimum="100">${message}</meter> (${message})</span>`;
}

sliderInput.addEventListener("input", updateHeadingValue);
form.addEventListener("submit", handelSubmit);