有這段代碼，在其中我使用 rangeGap 設定滑塊之間的最小縮進。一切似乎都按原樣進行，但它們繼續相互碰撞。也許有人可以告訴我出了什么問題。
我不知道是元素的定位還是我需要更改js中的邏輯。它應該像這樣作業，但是在碰撞時拇指不應該相互移動：https ://codepen.io/BabylonJS/pen/gqzBWx
const progressBar = document.querySelector('.slider--progress');
const inputMin = document.querySelector('.input--min');
const inputMax = document.querySelector('.input--max');
const inputRange = [inputMin, inputMax];
const rangeGap = 50000;
inputRange.forEach(function (el) {
el.addEventListener('input', function (e) {
let minValue = parseInt(inputRange[0].value);
let maxValue = parseInt(inputRange[1].value);
if (maxValue - minValue < rangeGap) {
if (e.target.className === 'input--min') {
inputRange[0].value = maxValue - rangeGap;
} else if (e.target.className === 'input--max') {
inputRange[1].value = minValue rangeGap;
}
} else {
progressBar.style.left = (minValue / inputRange[0].max) * 100 '%';
progressBar.style.right = 100 - (maxValue / inputRange[1].max) * 100 '%';
}
});
});*,
*::before,
*::after {
box-sizing: border-box;
}
body {
background: rgb(107, 216, 107);
}
.slider {
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
margin-top: 50px;
height: 30px;
width: 500px;
padding: 15px 10px;
border-radius: 10px;
background: rgb(42, 138, 42);
}
.slider--body {
background: rgb(250, 250, 250);
height: 4px;
width: 100%;
position: relative;
border-radius: 5px;
}
.slider--progress {
position: absolute;
left: 25%;
right: 25%;
background: rgb(107, 216, 107);
height: 4px;
border-radius: 10px;
}
.slider--inputs {
position: relative;
}
.slider--inputs > input {
pointer-events: none;
}
.slider--input {
position: absolute;
top: -2.4px;
left: -3px;
height: 5px;
width: calc(100% 2px);
background: none;
-webkit-appearance: none;
}
.slider--input::-webkit-slider-thumb {
width: 15px;
height: 15px;
background: rgb(107, 216, 107);
border-radius: 50%;
border: 1px solid rgb(42, 138, 42);
pointer-events: auto;
-webkit-appearance: none;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Double-range slider</title>
</head>
<body>
<div class="slider">
<div class="slider--body">
<div class="slider--progress"></div>
<div class="slider--inputs">
<input type="range" class="slider--input input--min" min="0" , max="999999" step="10" value="250000" />
<input type="range" class="slider--input input--max" min="0" , max="999999" step="10" value="750000" />
</div>
</div>
</div>
<script src="double-range-slider.js"></script>
</body>
</html>uj5u.com熱心網友回復：
感謝您的幫助）而不是className === 'class'，我寫了classList.contains('class')它并且它有效！
const progressBar = document.querySelector('.slider--progress');
const inputRange = document.querySelectorAll('.slider--input');
let rangeGap = 50000;
inputRange.forEach(function (el) {
el.addEventListener('input', function (e) {
let minValue = parseInt(inputRange[0].value);
let maxValue = parseInt(inputRange[1].value);
if (maxValue - minValue < rangeGap) {
if (e.target.classList.contains('input--min')) {
inputRange[0].value = maxValue - rangeGap;
} else if (e.target.classList.contains('input--max')) {
inputRange[1].value = minValue rangeGap;
}
} else {
progressBar.style.left = (minValue / inputRange[0].max) * 100 '%';
progressBar.style.right = 100 - (maxValue / inputRange[1].max) * 100 '%';
}
});
});*,
*::before,
*::after {
box-sizing: border-box;
}
body {
background: rgb(107, 216, 107);
}
.slider {
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
margin-top: 50px;
height: 30px;
width: 500px;
padding: 15px 10px;
border-radius: 10px;
background: rgb(42, 138, 42);
}
.slider--body {
background: rgb(250, 250, 250);
height: 4px;
width: 100%;
position: relative;
border-radius: 5px;
}
.slider--progress {
position: absolute;
left: 25%;
right: 25%;
background: rgb(107, 216, 107);
height: 4px;
border-radius: 10px;
}
.slider--inputs {
position: relative;
}
.slider--inputs > input {
pointer-events: none;
}
.slider--input {
position: absolute;
top: -2.4px;
left: -3px;
height: 5px;
width: calc(100% 2px);
background: none;
-webkit-appearance: none;
}
.slider--input::-webkit-slider-thumb {
width: 15px;
height: 15px;
border-radius: 50%;
border: 1px solid rgb(42, 138, 42);
pointer-events: auto;
-webkit-appearance: none;
background: rgb(107, 216, 107);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Double-range slider</title>
</head>
<body>
<div class="slider">
<div class="slider--body">
<div class="slider--progress"></div>
<div class="slider--inputs">
<input type="range" class="slider--input input--min" min="0" , max="999999" step="10" value="250000" />
<input type="range" class="slider--input input--max" min="0" , max="999999" step="10" value="750000" />
</div>
</div>
</div>
<script src="double-range-slider.js"></script>
</body>
</html>uj5u.com熱心網友回復：
e.target.className === 'input--min'將始終回傳 false。如果您e.target.className輸入控制臺日志，您將看到"slider--input input--min".
這是您的條件的正確方法??檢查元素是否包含 JavaScript 中的類？
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/416925.html
標籤：
下一篇：為什么容器流體在右側留下空白區域