index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href
<title>Document</title>
</head>
<body>
<main>
<div class="slider">
<!-- 显示选择的数值容器 -->
<span class="selected">
50
</span>
<!-- 滑动选择器 -->
<input type="range" id="slider-input" min="0" max="500" value="50" />
</div>
</main>
<script src="index.js"></script>
</body>
</html>
css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Helvetica, "PingFang SC", "Microsoft Yahei", sans-serif;
}
main {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #1e272e;
}
/* 选择器容器 */
.slider {
width: 50%;
display: flex;
align-items: center;
}
input[type="range"] {
/* 禁用浏览器默认外观 */
-webkit-appearance: none;
background: linear-gradient(75deg, #3c40c6 0%, #575fcf 100%);
border-radius: 4px;
width: 100%;
height: 12px;
outline: none;
box-shadow: 0 0 6px rgb(28, 32, 148);
}
/* 滑动选择器上的滑动按钮 */
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #f53b57;
transition: 0.3s;
}
/* 当滑动选择器上的滑动按钮滑动时 */
input[type="range"]:active::-webkit-slider-thumb {
background-color: #ef5777;
box-shadow: 0 0 0 6px rgba(155, 73, 146, 0.4);
}
/* 显示数值的容器 */
.selected {
margin-right: 16px;
background-color: #f53b57;
width: 80px;
line-height: 40px;
text-align: center;
color: white;
border-radius: 4px;
position: relative;
}
/* 三角 */
.selected::after {
content: "";
display: block;
border-top: 8px solid transparent;
border-left: 8px solid #f53b57;
border-bottom: 8px solid transparent;
position: absolute;
top: calc(50% - 8px);
right: -6px;
}
js部分
// 获取滑动选择器实例
const sliderEl = document.querySelector("#slider-input");
// 获取数值显示容器实例
const selectedEl = document.querySelector(".selected");
// 监听滑动事件
sliderEl.addEventListener("input", () => {
selectedEl.innerHTML = sliderEl.value;
});
