Expand element with slider

by ShaCP

HTML

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

CSS

.expandable_content {
  width: 100px;
  background-color: lightskyblue;
  transition: height 0.5s;
}

.content {
  height: 250px;
  background-color: lightpink;
}

.expandable_content_container {
  /*   position: sticky;
  bottom: 0; */
}


* {
  box-sizing: border-box;
  margin: 0;
  border: 1px solid red;
}

JavaScript

const heightControl = document.querySelector("#height-control");
const expandable = document.querySelector(".expandable_content");
const expandableContainer = document.querySelector(".expandable_content_container");
const originalHeight = 500;
let rafId

heightControl.addEventListener("input", e => {
expandable.style.height = `${50 * parseInt(e.target.value) + 500}px`; 
rafId = rafId || window.requestAnimationFrame(adjustScroll);
})


function adjustScroll (timestamp) {
expandableContainer.scrollIntoView(false);
rafId = window.requestAnimationFrame(adjustScroll);
}

heightControl.addEventListener("mouseup", e => {
window.cancelAnimationFrame(rafId)
rafId = null;
});