使用 js 制作滑动按钮的步骤：创建 html 结构，包括输入元素和显示值元素。添加 css 样式，自定义输入元素和显示值元素的外观。添加 javascript 代码，当输入元素改变时更新显示值元素中的值。

JS 制作滑动按钮

步骤

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;
});

以上步骤将创建如下效果：

• 一个范围输入元素（input[type="range"]）用于控制滑动按钮。
• 一个 span 元素（.slider-value）用于显示滑动按钮的当前值。
• 当滑动按钮的鼠标松开时，其值将更新并显示在 .slider-value 元素中。

以上就是如何js制作滑动按钮的详细内容，更多请关注php中文网其它相关文章！