如何使我的滑块具有响应式高度

<div class="container">
  <div class="slider"></div>
</div>

.container {
  display: flex;
  height: 300px; /* 设置容器的初始高度 */
}

.slider {
  background-color: blue;
  height: 50%; /* 设置滑块的初始高度 */
  width: 100%;
}

const container = document.querySelector('.container');
const slider = document.querySelector('.slider');

function resizeSlider() {
  const containerHeight = container.clientHeight;
  const sliderHeight = containerHeight * 0.5; // 根据需要的比例计算滑块的高度
  slider.style.height = `${sliderHeight}px`;
}

window.addEventListener('resize', resizeSlider);