如何使输入滑块不相互重叠?
How to make input sliders not overlap each other?
有这段代码,我在其中使用 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>
e.target.className === 'input--min'
将始终 return 错误。如果您将 e.target.className
放入控制台日志中,您将看到 "slider--input input--min"
.
这是适合您情况的正确方法Check if an element contains a class in JavaScript?
感谢您的帮助)我写了 classList.contains('class')
而不是 className === '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>
有这段代码,我在其中使用 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>
e.target.className === 'input--min'
将始终 return 错误。如果您将 e.target.className
放入控制台日志中,您将看到 "slider--input input--min"
.
这是适合您情况的正确方法Check if an element contains a class in JavaScript?
感谢您的帮助)我写了 classList.contains('class')
而不是 className === '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>