Вызываете свой код (в первой же строчке) только для первого слайдера. Лучше переписать таким образом, чтобы в качестве аргумента была сама Node, а не селектор и продублировать этот вызов для второго слайдера:
setTimeout(initSliders(document.querySelectorAll('.slider')[0], document.querySelectorAll('.between')[0], document.querySelectorAll('.first')[0], document.querySelectorAll('.second')[0], document.querySelectorAll('.min')[0], document.querySelectorAll('.max')[0]), 0);
setTimeout(initSliders(document.querySelectorAll('.slider')[1], document.querySelectorAll('.between')[1], document.querySelectorAll('.first')[1], document.querySelectorAll('.second')[1], document.querySelectorAll('.min')[1], document.querySelectorAll('.max')[1]), 0);
function initSliders(argSlider, argBtw, argBtn1, argBtn2, argInp1, argInp2) {
const slider = argSlider;
const between = argBtw;
const button1 = argBtn1;
const button2 = argBtn2;
const inpt1 = argInp1;
const inpt2 = argInp2;
const min = inpt1.min;
const max = inpt1.max;
/* инициализация */
const sliderCoords = getCoords(slider);
button1.style.marginLeft = '0px';
button2.style.marginLeft = (slider.offsetWidth - button1.offsetWidth) + 'px';
between.style.width = slider.offsetWidth + 'px';
inpt1.value = min;
inpt2.value = max;
/* первый вывод */
inpt1.onchange = (evt) => {
if (parseInt(inpt1.value) < min) {
inpt1.value = min;
}
if (parseInt(inpt1.value) > max) {
inpt1.value = max;
}
if (parseInt(inpt1.value) > parseInt(inpt2.value)) {
const temp = inpt1.value;
inpt1.value = inpt2.value;
inpt2.value = temp;
}
const sliderCoords = getCoords(slider);
const per1 = parseInt(inpt1.value - min) * 100 / (max - min);
const per2 = parseInt(inpt2.value - min) * 100 / (max - min);
const left1 = per1 * (slider.offsetWidth - button1.offsetWidth) / 100;
const left2 = per2 * (slider.offsetWidth - button1.offsetWidth) / 100;
button1.style.marginLeft = left1 + 'px';
button2.style.marginLeft = left2 + 'px';
if (left1 > left2) {
between.style.width = (left1 - left2 + 18) + 'px';
between.style.marginLeft = left2 + 'px';
} else {
between.style.width = (left2 - left1 + 18) + 'px';
between.style.marginLeft = left1 + 'px';
}
}
/* второй вывод */
inpt2.onchange = (evt) => {
if (parseInt(inpt2.value) < min) inpt2.value = min;
if (parseInt(inpt2.value) > max) inpt2.value = max;
if (parseInt(inpt1.value) > parseInt(inpt2.value)) {
const temp = inpt1.value;
inpt1.value = inpt2.value;
inpt2.value = temp;
}
const sliderCoords = getCoords(slider);
const per1 = parseInt(inpt1.value - min) * 100 / (max - min);
const per2 = parseInt(inpt2.value - min) * 100 / (max - min);
const left1 = per1 * (slider.offsetWidth - button1.offsetWidth) / 100;
const left2 = per2 * (slider.offsetWidth - button1.offsetWidth) / 100;
button1.style.marginLeft = left1 + 'px';
button2.style.marginLeft = left2 + 'px';
if (left1 > left2) {
between.style.width = (left1 - left2 + 18) + 'px';
between.style.marginLeft = left2 + 'px';
} else {
between.style.width = (left2 - left1 + 18) + 'px';
between.style.marginLeft = left1 + 'px';
}
}
/* события мыши */
button1.onmousedown = (evt) => {
const sliderCoords = getCoords(slider);
const betweenCoords = getCoords(between);
const buttonCoords1 = getCoords(button1);
const buttonCoords2 = getCoords(button2);
let shiftX1 = evt.pageX - buttonCoords1.left;
let shiftX2 = evt.pageX - buttonCoords2.left;
document.onmousemove = (evt) => {
let left1 = evt.pageX - shiftX1 - sliderCoords.left;
let right1 = slider.offsetWidth - button1.offsetWidth;
if (left1 < 0) {
left1 = 0;
}
if (left1 > right1) {
left1 = right1;
}
button1.style.marginLeft = left1 + 'px';
shiftX2 = evt.pageX - buttonCoords2.left;
let left2 = evt.pageX - shiftX2 - sliderCoords.left;
let right2 = slider.offsetWidth - button2.offsetWidth;
if (left2 < 0) {
left2 = 0;
}
if (left2 > right2) {
left2 = right2;
}
let per_min = 0;
let per_max = 0;
if (left1 > left2) {
between.style.width = (left1 - left2 + 18) + 'px';
between.style.marginLeft = left2 + 'px';
per_min = left2 * 100 / (slider.offsetWidth - button1.offsetWidth);
per_max = left1 * 100 / (slider.offsetWidth - button1.offsetWidth);
} else {
between.style.width = (left2 - left1 + 18) + 'px';
between.style.marginLeft = left1 + 'px';
per_min = left1 * 100 / (slider.offsetWidth - button1.offsetWidth);
per_max = left2 * 100 / (slider.offsetWidth - button1.offsetWidth);
}
inpt1.value = (parseInt(min) + Math.round((max - min) * per_min / 100));
inpt2.value = (parseInt(min) + Math.round((max - min) * per_max / 100));
};
document.onmouseup = () => document.onmousemove = document.onmouseup = null;
return false;
};
button2.onmousedown = (evt) => {
const sliderCoords = getCoords(slider);
const betweenCoords = getCoords(between);
const buttonCoords1 = getCoords(button1);
const buttonCoords2 = getCoords(button2);
let shiftX1 = evt.pageX - buttonCoords1.left;
let shiftX2 = evt.pageX - buttonCoords2.left;
document.onmousemove = (evt) => {
let left2 = evt.pageX - shiftX2 - sliderCoords.left;
let right2 = slider.offsetWidth - button2.offsetWidth;
if (left2 < 0) {
left2 = 0;
}
if (left2 > right2) {
left2 = right2;
}
button2.style.marginLeft = left2 + 'px';
shiftX1 = evt.pageX - buttonCoords1.left;
let left1 = evt.pageX - shiftX1 - sliderCoords.left;
let right1 = slider.offsetWidth - button1.offsetWidth;
if (left1 < 0) {
left1 = 0;
}
if (left1 > right1) {
left1 = right1;
}
let per_min = 0;
let per_max = 0;
if (left1 > left2) {
between.style.width = (left1 - left2 + 18) + 'px';
between.style.marginLeft = left2 + 'px';
per_min = left2 * 100 / (slider.offsetWidth - button1.offsetWidth);
per_max = left1 * 100 / (slider.offsetWidth - button1.offsetWidth);
} else {
between.style.width = (left2 - left1 + 18) + 'px';
between.style.marginLeft = left1 + 'px';
per_min = left1 * 100 / (slider.offsetWidth - button1.offsetWidth);
per_max = left2 * 100 / (slider.offsetWidth - button1.offsetWidth);
}
inpt1.value = (parseInt(min) + Math.round((max - min) * per_min / 100));
inpt2.value = (parseInt(min) + Math.round((max - min) * per_max / 100));
};
document.onmouseup = () => document.onmousemove = document.onmouseup = null;
return false;
};
/* отключение Drag’n’Drop браузера, чтобы не было конфликта */
button1.ondragstart = () => {
return false;
};
button2.ondragstart = () => {
return false;
};
}
/* Получение координат элемента */
function getCoords(elem) {
const box = elem.getBoundingClientRect();
return {
top: box.top + pageYOffset,
left: box.left + pageXOffset
};
}