Есть вот такой код, в нем я установил минимальный отступ между ползунками с помощью rangeGap. Все вроде как должно работать, но они продолжают наезжать друг на друга. Возможно кто-то подскажет в чем ошибка.
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>