<form>

  <label for="lower">Lower Bound: <span>400</span></label>
  <label for="upper">Upper Bound: <span>1200</span></label>

  <div class="slider">
    <input type="range" id="lower" min=100 max=2000 value=400>
    <input type="range" id="upper" min=100 max=2000 value=1200>
  </div>

</form>

<div class="bounds"></div>

<div class="info"></div>

@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");

@property --100vw {
  syntax: "<length>";
  initial-value: 0px;
  inherits: false;
}

:root {
  --100vw: 100vw;
  --int-width: calc(10000 * tan(atan2(var(--100vw), 10000px)));

  --lower-bound: 400;
  --upper-bound: 1200;
  --wideness: calc(
    (
        clamp(var(--lower-bound), var(--int-width), var(--upper-bound)) -
          var(--lower-bound)
      ) / (var(--upper-bound) - var(--lower-bound))
  );
}

/* Aesthetic Changes */

:root {
  --rem-value: clamp(10px, 2vw, 18px);
}

* {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
}

html {
  font-family: "Montserrat", sans-serif;
  font-size: var(--rem-value);
}

body {
  display: grid;
  place-items: center;
  min-height: 100vh;

  overflow: hidden;

  background: linear-gradient(
    90deg,
    #b0e1e3 calc(var(--lower-bound) * 1px),
    #f39797 calc(var(--lower-bound) * 1px),
    #f39797 calc(var(--upper-bound) * 1px),
    #c1ff72 calc(var(--lower-bound) * 1px)
  );
}

.info {
  display: flex;
  flex-flow: column;
  gap: 20px;

  position: absolute;
  bottom: 3rem;
  right: 3rem;

  counter-reset: wideness calc(var(--wideness) * 100) int-width var(--int-width);

  font-size: 20px;
  text-align: center;

  &::before {
    content: "Wideness: " counter(wideness) "%";
  }

  &::after {
    content: "Width: " counter(int-width);
  }
}

.bounds {
  counter-reset: lower var(--lower-bound) upper var(--upper-bound);

  font-size: 24px;
  font-weight: 600;

  &::before {
    position: absolute;
    top: 50vh;
    left: calc(var(--lower-bound) * 1px);
    transform: translate(-50%);

    content: counter(lower) "px";
  }

  &::after {
    position: absolute;
    top: 50vh;
    transform: translate(-50%);
    left: calc(var(--upper-bound) * 1px);
    content: counter(upper) "px";
  }
}

form {
  display: flex;
  align-items: center;
  flex-flow: column;
  gap: 10px;

  width: 15rem;

  position: absolute;
  top: 3rem;
  left: 3rem;

  padding: 20px;
  border-radius: 20px;

  background-color: white;
}

.slider {
  width: 80%;
  margin: 20px auto;
  position: relative;
}

.slider input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 8px;
  background: #ddd;
  border-radius: 5px;
  outline: none;
  position: absolute;
  top: 0;
}

.slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  background: #007bff;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  z-index: 2;
}

.slider input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: #007bff;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  z-index: 2;
}

const lowerInput = document.querySelector("#lower");
const upperInput = document.querySelector("#upper");

const lowerDisplay = document.querySelector("label[for='lower'] span");
const upperDisplay = document.querySelector("label[for='upper'] span");

lowerInput.addEventListener("input", (event) => {
  currentValue = parseInt(event.target.value);
  upperValue = parseInt(upperInput.value);

  if (currentValue < upperValue) {
    lowerDisplay.textContent = event.target.value;
    document.documentElement.style.setProperty(
      "--lower-bound",
      event.target.value
    );
  } else {
    lowerDisplay.textContent = upperValue;
    lowerInput.value = upperValue;

    document.documentElement.style.setProperty("--lower-bound", upperValue - 1);
  }
});

upperInput.addEventListener("input", (evet) => {
  currentValue = parseInt(event.target.value);
  lowerValue = parseInt(lower.value);

  if (currentValue > lowerValue) {
    upperDisplay.textContent = event.target.value;
    document.documentElement.style.setProperty(
      "--upper-bound",
      event.target.value
    );
  } else {
    upperDisplay.textContent = lowerValue;
    upperInput.value = lowerValue;

    document.documentElement.style.setProperty("--upper-bound", lowerValue + 1);
  }
});