Expand element with slider 0

by ShaCP

HTML

<div class="parent">
<div class="child" style="height: 500px">
</div>
<input id="height-control" type="range" min="0" max="10" value="1">
</div>

CSS

.parent {
  /*   position: relative;
  bottom: 0; */
  height: fit-content;
  align-self: flex-end;
}

.child {
  width: 100px;
  background-color: lightskyblue;
}

input {
  /*  top: 95%; */
}

body {
  position: relative;
  display: flex;
}


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

JavaScript

const heightControl = document.querySelector("#height-control");
const child = document.querySelector(".child");
const originalHeight = 500;

heightControl.addEventListener("input", e => {
child.style.height = `${200 * parseInt(e.target.value) + originalHeight}px`; 
heightControl.scrollIntoView();
})