技术求助：如何创建带有可用slider的此类设计？

以下是用HTML、CSS和原生JavaScript实现这类滑块布局的基础示例，可根据需求调整细节：

HTML结构 #

<div class="slider-wrap">
  <!-- 滑块轨道 -->
  <div class="slider-track">
    <div class="slider-progress"></div>
  </div>
  <!-- 滑块手柄 -->
  <div class="slider-handle"></div>
  <!-- 关联内容区 -->
  <div class="content-list">
    <div class="content-card">卡片1</div>
    <div class="content-card">卡片2</div>
    <div class="content-card">卡片3</div>
    <div class="content-card">卡片4</div>
    <div class="content-card">卡片5</div>
  </div>
</div>

CSS样式 #

.slider-wrap {
  position: relative;
  width: 90%;
  margin: 30px auto;
}

.slider-track {
  width: 100%;
  height: 6px;
  background: #eee;
  border-radius: 3px;
  position: absolute;
  top: 10px;
}

.slider-progress {
  height: 100%;
  width: 0;
  background: #409eff;
  border-radius: 3px;
  transition: width 0.2s ease;
}

.slider-handle {
  width: 24px;
  height: 24px;
  background: #409eff;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 0;
  cursor: grab;
  user-select: none;
}

.slider-handle:active {
  cursor: grabbing;
}

.content-list {
  display: flex;
  gap: 20px;
  overflow-x: hidden;
  padding: 40px 0 20px;
}

.content-card {
  flex-shrink: 0;
  width: 200px;
  padding: 20px;
  background: #f7f7f7;
  border-radius: 8px;
  text-align: center;
}

JavaScript逻辑 #

const handle = document.querySelector('.slider-handle');
const progress = document.querySelector('.slider-progress');
const track = document.querySelector('.slider-track');
const contentList = document.querySelector('.content-list');

const trackWidth = track.offsetWidth;
const maxScroll = contentList.scrollWidth - contentList.offsetWidth;
let isDragging = false;

// 鼠标按下开始拖动
handle.addEventListener('mousedown', (e) => {
  isDragging = true;
  document.addEventListener('mousemove', dragHandler);
  document.addEventListener('mouseup', stopDrag);
  e.preventDefault();
});

// 拖动时更新状态
function dragHandler(e) {
  if (!isDragging) return;
  // 计算鼠标在轨道内的相对位置
  let posX = e.clientX - track.getBoundingClientRect().left;
  // 限制拖动范围
  posX = Math.max(0, Math.min(trackWidth, posX));
  // 更新滑块和进度条位置
  handle.style.left = `${posX}px`;
  progress.style.width = `${posX}px`;
  // 联动滚动内容区
  const scrollRatio = posX / trackWidth;
  contentList.scrollLeft = maxScroll * scrollRatio;
}

// 停止拖动
function stopDrag() {
  isDragging = false;
  document.removeEventListener('mousemove', dragHandler);
  document.removeEventListener('mouseup', stopDrag);
}

你可以根据设计图调整颜色、尺寸、卡片样式，也可以添加刻度标记、数值显示等扩展功能。

内容的提问来源于stack exchange，提问作者YAL Genisys