滑块是常见的用户界面组件，允许用户从范围中选择值。通过向单个滑块添加多个指针，我们可以在选择多个值时提供更大的灵活性。我们的目标是实现一个具有三个可拖动指针的滑块，每个指针代表滑块范围内的特定值。
我想使用 Vanilla Javascript 或 Angular 或 React 制作具有三个指针和四个值的单个滑块
我们知道如何仅使用普通的 HTML 标签（例如
）来制作带有两个指针的范围滑块<input type="range" id="points" name="points" min="0" max="10">
但是如何制作具有三个指针和四个值的单个滑块，不用担心，这里您可以使用普通的 HTML、CSS 和 Javascript 看到解决方案
在开始之前，请确保您对 HTML、CSS 和 JavaScript 有基本的了解。另外，请确保您有 Visual Studio Code 或 Sublime Text 等代码编辑器来编写和测试代码。
第 1 步：设置 HTML 结构
<!DOCTYPE HTML>
<HTML>
<head>
<title>Three-Pointer Slider</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="slider-container">
<div class="slider-track"></div>
<div class="slider-pointer" data-value="50" style="left: 50%;"></div>
<div class="slider-pointer" data-value="90" style="left: 90%;"></div>
<div class="slider-pointer" data-value="100" style="left: 100%;">.
</div>
</div>
<div class="result-container">
<div>Value 1: <span id="value1">50</span></div>
<div>Value 2: <span id="value2">40</span></div>
<div>Value 3: <span id="value3">10</span></div>
<div>Value 4: <span id="value4">0</span></div>
</div>
<script src="script.js"></script>
</body>
</html>
第 2 步：使用 CSS 设置滑块样式
.slider-container {
position: relative;
width: 100%;
height: 20px;
background-color: #ddd;
}
.slider-track {
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 4px;
background-color: #333;
}
.slider-pointer {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #0066cc;
cursor: pointer;
}
.result-container {
margin-top: 20px;
font-size: 16px;
}
第 3 步：实现 JavaScript 逻辑
const sliderContainer = document.querySelector(".slider-container");
const sliders = document.querySelectorAll(".slider-pointer");
const value1 = document.getElementById("value1");
const value2 = document.getElementById("value2");
const value3 = document.getElementById("value3");
const value4 = document.getElementById("value4");
function updateValues() {
const values = Array.from(sliders).map((slider) =>
Number(slider.dataset.value));
value1.textContent = values[0];
value2.textContent = values[1] - values[0];
value3.textContent = values[2] - values[1];
value4.textContent = 100 - (values[2] - values[1] + values[1] -
values[0] + values[0]);
}
sliders.forEach((slider) => {
slider.addEventListener("mousedown", (e) => {
const target = e.target;
const sliderWidth = target.parentNode.offsetWidth;
let prevX = e.clientX;
function onMouseMove(e) {
const deltaX = e.clientX - prevX;
const newPosition = Math.min(Math.max(target.offsetLeft + deltaX, 0),
sliderWidth);
prevX = e.clientX;
target.style.left = newPosition + "px";
target.dataset.value = Math.round((newPosition / sliderWidth) * 100);
updateValues();
}
function onMouseUp() {
document.removeEventListener("mousemove", onMouseMove);
document.removeEventListener("mouseup", onMouseUp);
}
document.addEventListener("mousemove", onMouseMove);
document.addEventListener("mouseup", onMouseUp);
}）； });
// 更新初始值 更新值（）；