如何添加和Netflix一样的拖拽滑块？

<div id="slider-container">
  <!-- 滑块内容 -->
</div>

#slider-container {
  width: 100%;
  height: 100px;
  background-color: #ccc;
  cursor: grab;
}

var sliderContainer = document.getElementById('slider-container');
var isDragging = false;
var startPosition = 0;
var currentTranslate = 0;

sliderContainer.addEventListener('mousedown', dragStart);
sliderContainer.addEventListener('mousemove', drag);
sliderContainer.addEventListener('mouseup', dragEnd);
sliderContainer.addEventListener('mouseleave', dragEnd);

function dragStart(event) {
  isDragging = true;
  startPosition = getPositionX(event);
}

function drag(event) {
  if (isDragging) {
    var currentPosition = getPositionX(event);
    var diff = currentPosition - startPosition;
    currentTranslate += diff;
    updateSliderPosition();
    startPosition = currentPosition;
  }
}

function dragEnd() {
  isDragging = false;
}

function getPositionX(event) {
  return event.type.includes('mouse') ? event.pageX : event.touches[0].clientX;
}

function updateSliderPosition() {
  sliderContainer.style.transform = 'translateX(' + currentTranslate + 'px)';
}