使用 JS 制作滑动按钮的步骤：创建 HTML 结构，包括输入元素和显示值元素。添加 CSS 样式，自定义输入元素和显示值元素的外观。添加 JavaScript 代码，当输入元素改变时更新显示值元素中的值。
JS 制作滑动按钮
步骤
1. 创建 HTML 结构
<code class="html"><div class="container"> <input type="range" min="0" max="100" value="50" step="1"> <span class="slider-value">50</span> </div></code>
2. 添加 CSS 样式
<code class="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;
}</code>3. 添加 JavaScript 代码
<code class="javascript">const slider = document.querySelector("input[type='range']");
const sliderValue = document.querySelector(".slider-value");
slider.addEventListener("input", (e) => {
sliderValue.innerText = e.target.value;
});</code>以上步骤将创建如下效果：
- 一个范围输入元素（input[type="range"]）用于控制滑动按钮。
- 一个 span 元素（.slider-value）用于显示滑动按钮的当前值。
- 当滑动按钮的鼠标松开时，其值将更新并显示在 .slider-value 元素中。
