我想不通的东西。我有一个滑块背景（蓝色的）没有到达开头或在滑块更改时爬出滑块。如果我将 <input type="range" min="300" 的 min 设置为 0，那么没有问题，但我可以有不同的范围，甚至从 0 到 100，甚至从 1200 到 4000 等等。并且没有办法设置范围的背景，使其严格在数字范围内（简而言之，工作）。要查看我在说什么，请全屏打开代码。
window.onload = function(){
slideOne();
slideTwo();
}
let sliderOne = document.getElementById("slider-1");
let sliderTwo = document.getElementById("slider-2");
let displayValOne = document.getElementById("range1");
let displayValTwo = document.getElementById("range2");
let minGap = 0;
let sliderTrack = document.querySelector(".slider-track");
let sliderMaxValue = document.getElementById("slider-1").max;
function slideOne(){
if(parseInt(sliderTwo.value) - parseInt(sliderOne.value) <= minGap){
sliderOne.value = parseInt(sliderTwo.value) - minGap;
}
displayValOne.textContent = sliderOne.value;
fillColor();
}
function slideTwo(){
if(parseInt(sliderTwo.value) - parseInt(sliderOne.value) <= minGap){
sliderTwo.value = parseInt(sliderOne.value) + minGap;
}
displayValTwo.textContent = sliderTwo.value;
fillColor();
}
function fillColor(){
percent1 = (sliderOne.value / sliderMaxValue) * 100;
percent2 = (sliderTwo.value / sliderMaxValue) * 100;
sliderTrack.style.background = `linear-gradient(to right, #dadae5 ${percent1}% , #3264fe ${percent1}% , #3264fe ${percent2}%, #dadae5 ${percent2}%)`;
}*,
*:before,
*:after{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins",sans-serif;
}
body{
height: 100vh;
display: -ms-grid;
display: grid;
background-color: #000;
place-items: center;
}
.wrapper{
position: relative;
width: 95vmin;
background-color: #ffffff;
padding: 50px 40px 20px 40px;
border-radius: 10px;
}
.container{
position: relative;
width: 100%;
height: 100px;
margin-top: 30px;
}
input[type="range"]{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
outline: none;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
background-color: transparent;
pointer-events: none;
}
.slider-track{
width: 100%;
height: 5px;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
border-radius: 5px;
}
input[type="range"]::-webkit-slider-runnable-track{
-webkit-appearance: none;
height: 5px;
}
input[type="range"]::-moz-range-track{
-moz-appearance: none;
height: 5px;
}
input[type="range"]::-ms-track{
appearance: none;
height: 5px;
}
input[type="range"]::-webkit-slider-thumb{
-webkit-appearance: none;
height: 1.7em;
width: 1.7em;
background-color: #3264fe;
cursor: pointer;
margin-top: -9px;
pointer-events: auto;
border-radius: 50%;
}
input[type="range"]::-moz-range-thumb{
-webkit-appearance: none;
height: 1.7em;
width: 1.7em;
cursor: pointer;
border-radius: 50%;
background-color: #3264fe;
pointer-events: auto;
}
input[type="range"]::-ms-thumb{
appearance: none;
height: 1.7em;
width: 1.7em;
cursor: pointer;
border-radius: 50%;
background-color: #3264fe;
pointer-events: auto;
}
input[type="range"]:active::-webkit-slider-thumb{
background-color: #ffffff;
border: 3px solid #3264fe;
}
.values{
background-color: green;
width: 32%;
position: relative;
margin: auto;
padding: 10px 0;
border-radius: 5px;
text-align: center;
font-weight: 500;
font-size: 25px;
color: #ffffff;
}
.values:before{
content: "";
position: absolute;
height: 0;
width: 0;
border-top: 15px solid green;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
margin: auto;
bottom: -14px;
left: 0;
right: 0;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Double Range Slider</title>
<!--Google Fonts-->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap" rel="stylesheet">
<!--Stylesheet-->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="values">
<span id="range1">
0
</span>
<span> ‐ </span>
<span id="range2">
100
</span>
</div>
<div class="container">
<div class="slider-track"></div>
<input type="range" min="300" max="1500" value="300" id="slider-1" oninput="slideOne()">
<input type="range" min="300" max="1500" value="1500" id="slider-2" oninput="slideTwo()">
</div>
</div>
<!--Script-->
<script src="script.js"></script>
</body>
</html>
您的主要问题是您的幻灯片从 300 和 1500 开始，并且可能没有最小值
0%。这是一个示例，对于最小值，您有 300，滑块在
20%左侧，这是不正确的，因为您的滑块不是从 0 开始而是从 300 开始，300/1500 * 100 = 20。另一种解决方案是设置最小值为 0，最大值为 1500，因此它将正常工作。