如何在我的滑块两边都有文字？

<div class="slider-container">
  <span class="left-text">左侧文字</span>
  <input type="range" class="slider">
  <span class="right-text">右侧文字</span>
</div>

.slider-container {
  display: flex;
  align-items: center;
}

.left-text, .right-text {
  flex: 1;
}

.slider {
  flex: 2;
  margin: 0 10px;
}

const slider = document.querySelector('.slider');
const leftText = document.querySelector('.left-text');
const rightText = document.querySelector('.right-text');

slider.addEventListener('input', function() {
  const value = slider.value;
  leftText.textContent = '左侧文字 ' + value;
  rightText.textContent = value + ' 右侧文字';
});