使用 js 制作滑动按钮的步骤：创建 html 结构，包括输入元素和显示值元素。添加 css 样式，自定义输入元素和显示值元素的外观。添加 javascript 代码，当输入元素改变时更新显示值元素中的值。
1. 创建 HTML 结构
<div class="container"> <input type="range" min="0" max="100" value="50" step="1"><span class="slider-value">50</span> </div>
2. 添加 CSS 样式
.container {
position: relative;
}
input[type="range"] {
-webkit-appearance: none;
width: 200px;
height: 20px;
background: #ddd;
border-radius: 5px;
}
input[type="range"]::-webkit-slider-runnable-track {
background: #999;
height: 10px;
border-radius: 5px;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
background: #000;
border-radius: 50%;
cursor: pointer;
}
.slider-value {
position: absolute;
top: -25px;
left: 50%;
transform: translate(-50%, -50%);
font-size: 14px;
padding: 5px 10px;
background: #fff;
border-radius: 5px;
box-shadow: 0px 0px 5px #ccc;
}
3. 添加 JavaScript 代码
const slider = document.querySelector("input[type='range']");
const sliderValue = document.querySelector(".slider-value");
slider.addEventListener("input", (e) => {
sliderValue.innerText = e.target.value;
});
以上步骤将创建如下效果：