如何js制作滑动按钮-js教程-PHP中文网

如何js制作滑动按钮

星降

发布： 2024-10-09 03:24:43

原创

442人浏览过

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

如何js制作滑动按钮

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 代码

卡拉OK视频制作

卡拉OK视频制作，在几分钟内制作出你的卡拉OK视频

178

查看详情

<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>

登录后复制

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