基础 CSS 滑块垂直

CSS 滑块是一个用于选择某个值的控件，通常用于表单中。在本文中，我们将探讨如何基于 CSS 实现一个简单的垂直滑块。

HTML 结构

我们的滑块将由一个父元素 .slider 和两个子元素 .track 和 .thumb 组成。.thumb 元素可以通过拖动来改变位置。下面是我们的 HTML 代码：

<div class="slider">
  <div class="track"></div>
  <div class="thumb"></div>
</div>

CSS 样式

我们首先设置 .slider 的宽度和高度，并使其垂直居中。我们还将 .track 设置为红色，以便更好地展示它。

.slider {
  width: 10px;
  height: 150px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.track {
  width: 10px;
  height: 100%;
  background-color: red;
}

我们需要对 .thumb 进行一些额外的样式来使其能够进行拖动。我们设置了一个初始位置，并且将其设置为绝对定位。我们还设置了 cursor: grab，以使光标在鼠标悬停时变为 ‘抓取’ 状。

.thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: white;
  border: 1px solid black;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: grab;
}

JavaScript 交互

我们将使用 JavaScript 来使 .thumb 元素能够进行拖动。首先，我们需要监听 mousedown 事件，以便知道何时开始拖动。还需要监听 mouseup 和 mousemove 事件，以便在拖动过程中更新 .thumb 的位置，并在释放鼠标时停止拖动。

const thumb = document.querySelector('.thumb');
const slider = document.querySelector('.slider');
let isDragging = false;

// 计算鼠标相对于父元素的位置
function getPosition(el) {
  const rect = el.getBoundingClientRect();
  return {
    x: rect.left + window.pageXOffset,
    y: rect.top + window.pageYOffset
  };
}

thumb.addEventListener('mousedown', e => {
  isDragging = true;
  thumb.style.cursor = 'grabbing';
});

document.addEventListener('mouseup', e => {
  isDragging = false;
  thumb.style.cursor = 'grab';
});

document.addEventListener('mousemove', e => {
  if (!isDragging) return;
  
  const position = getPosition(slider);
  const x = e.pageX - position.x;
  const y = e.pageY - position.y;
  const percent = y / slider.offsetHeight;
  
  thumb.style.top = `${Math.min(Math.max(0, percent * 100), 100)}%`;
});

在上面的代码块中，我们首先获取 .thumb 和 .slider 元素的引用。我们还定义了一个 isDragging 变量，用于跟踪拖动状态。我们还定义了一个 getPosition 函数，该函数用于计算鼠标指针相对于父元素的位置。

在 mousedown 事件中，我们将 isDragging 设置为 true，并将 .thumb 的光标设置为 ‘grabbing' 状态以指示拖动操作。在 mouseup 事件中，我们将 isDragging 设置为 false，并将 .thumb 的光标设置为 ‘grab' 状态以指示拖动操作已完成。

在 mousemove 事件中，我们首先检查 isDragging 是否为 true，以便知道是否正在执行拖动操作。如果正在拖动，则计算鼠标指针相对于 .slider 元素的位置，并将其转换为百分比。最后，我们使用 Math.min 和 Math.max 函数来限制 .thumb 的位置始终在 .slider 元素内。

代码片段：

```html
<div class="slider">
  <div class="track"></div>
  <div class="thumb"></div>
</div>

.slider {
  width: 10px;
  height: 150px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.track {
  width: 10px;
  height: 100%;
  background-color: red;
}

.thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: white;
  border: 1px solid black;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: grab;
}

const thumb = document.querySelector('.thumb');
const slider = document.querySelector('.slider');
let isDragging = false;

function getPosition(el) {
  const rect = el.getBoundingClientRect();
  return {
    x: rect.left + window.pageXOffset,
    y: rect.top + window.pageYOffset
  };
}

thumb.addEventListener('mousedown', e => {
  isDragging = true;
  thumb.style.cursor = 'grabbing';
});

document.addEventListener('mouseup', e => {
  isDragging = false;
  thumb.style.cursor = 'grab';
});

document.addEventListener('mousemove', e => {
  if (!isDragging) return;
  
  const position = getPosition(slider);
  const x = e.pageX - position.x;
  const y = e.pageY - position.y;
  const percent = y / slider.offsetHeight;
  
  thumb.style.top = `${Math.min(Math.max(0, percent * 100), 100)}%`;
});