滑到制定位置，饼图开始加载到制定数值

要实现滑到指定位置时，饼图开始加载到指定数值，可以使用JavaScript的事件处理机制和CSS的动画效果。

首先，我们需要给滑动条添加一个事件监听器，监听滑动事件。当滑动到指定位置时，我们就可以触发饼图的加载动画。

下面是一个示例代码，可以根据需要进行调整：

<div class="slider-container">
  <input type="range" min="0" max="100" value="0" class="slider" id="slider">
  <div class="pie-chart">
    <div class="pie-chart-inner"></div>
    <div class="pie-chart-label">0%</div>
  </div>
</div>

.pie-chart {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #eee;
  overflow: hidden;
}

.pie-chart-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  clip: rect(0, 100px, 200px, 0);
  background-color: #f00;
  transform-origin: center center;
  transform: rotate(0deg);
  transition: transform 1s ease-out;
}

.pie-chart-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  font-weight: bold;
  color: #000;
}

.slider-container {
  width: 200px;
  margin: 50px auto;
}

.slider {
  width: 100%;
}

const slider = document.getElementById("slider");
const pieChart = document.querySelector(".pie-chart");
const pieChartInner = document.querySelector(".pie-chart-inner");
const pieChartLabel = document.querySelector(".pie-chart-label");

slider.addEventListener("input", () => {
  const value = slider.value;
  const angle = (value / 100) * 360;
  pieChartInner.style.transform = `rotate(${angle}deg)`;
  pieChartLabel.textContent = `${value}%`;
});

解释一下代码：

首先，我们创建了一个包含滑动条和饼图的容器div，它的class为slider-container。滑动条使用了HTML5中的<input type="range">元素，它的min属性设置最小值，max属性设置最大值，value属性设置默认值，class属性设置样式。

饼图使用了两个div元素，一个用来表示饼图的外框，另一个用来表示饼图的填充部分。外框的class为pie-chart，它的position属性设置为relative，宽度和高度设置为200px，border-radius属性设置为50%，background-color属性设置为灰色，overflow属性设置为hidden。填充部分的class为pie-chart-inner，它的position属性设置为absolute，top和left属性设置为0，宽度和高度设置为100%，border-radius属性设置为50%，clip属性设置为rect(0, 100px, 200px, 0)，这样它只显示了右半边的饼图。background-color属性设置为红色，transform-origin属性设置为中心点，transform属性设置为rotate(0deg)，transition属性设置为transform 1s ease-out，这样它就会在1秒内平滑地转动到指定角度。label部分的class为pie-chart-label，它的position属性设置为absolute，top和left属性设置为50%，transform属性设置为translate(-50%, -50%)，这样它就可以居中显示。font-size属性设置为24px，font-weight属性设置为bold，color属性设置为黑色。

在JavaScript中，我们使用document.getElementById()方法获取到滑动条元素和饼图元素。然后，我们使用addEventListener()方法给滑动条添加一个input事件监听器，当滑动条的值变化时，就会触发这个事件。在事件处理函数中，我们首先获取滑动条的值，然后根据值计算出饼图需要转动的角度，最后使用style.transform属性将饼图内部元素的角度设置为计算出的角度，同时更新饼图标签的内容。这样，我们就可以实现滑动到指定位置时，饼图开始加载到指定数值的效果。