使滑块上的点变为活动状态

要将滑块上的点设置为活动状态，你可以使用JavaScript来实现。下面是一个简单的示例代码：

HTML代码：

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

CSS代码：

.slider {
  width: 300px;
  height: 10px;
  background-color: #ccc;
  position: relative;
}

.point {
  width: 20px;
  height: 20px;
  background-color: #ff0000;
  position: absolute;
  top: -5px;
  left: 0;
  border-radius: 50%;
  cursor: pointer;
}

JavaScript代码：

var point = document.querySelector('.point');
var slider = document.querySelector('.slider');

point.addEventListener('mousedown', function(event) {
  // 添加活动状态的类名
  point.classList.add('active');

  // 鼠标移动事件
  document.addEventListener('mousemove', movePoint);
  
  // 鼠标松开事件
  document.addEventListener('mouseup', function() {
    // 移除活动状态的类名
    point.classList.remove('active');
    
    // 移除鼠标移动事件
    document.removeEventListener('mousemove', movePoint);
  });
});

function movePoint(event) {
  // 获取滑块的左侧边界和右侧边界
  var sliderLeft = slider.getBoundingClientRect().left;
  var sliderRight = slider.getBoundingClientRect().right;

  // 获取鼠标在滑块上的位置
  var mouseX = event.clientX;

  // 限制活动范围在滑块内部
  if (mouseX < sliderLeft) {
    mouseX = sliderLeft;
  } else if (mouseX > sliderRight) {
    mouseX = sliderRight;
  }

  // 移动滑块点的位置
  point.style.left = (mouseX - sliderLeft) + 'px';
}

上述代码中，通过添加事件监听器，当鼠标按下滑块点时，会给该点添加一个活动状态的类名（active）。然后，当鼠标移动时，会触发mousemove事件，调用movePoint函数来移动滑块点的位置。当鼠标松开时，会移除活动状态的类名，并移除mousemove事件监听器。

请注意，以上示例代码只是一个基本的实现，你可以根据自己的需求进行修改和扩展。