Answer the question
In order to leave comments, you need to log in
Block with hidden content, what am I doing wrong?
Hi all!
I'm making a block with hidden content for the project: here
It looks like this:
The first slider works, which can be seen in the screenshot above.
But the second slider doesn't work at all .
What am I doing wrong? Tell me please.
And one more thing - how to make the values of the sliders of the slider be tied to the sliders themselves, so that when they are moved, the values would always be under them?
Answer the question
In order to leave comments, you need to log in
Call your code (in the first line) only for the first slider. It is better to rewrite in such a way that the Node itself is the argument, and not the selector, and duplicate this call for the second slider:
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
};
}
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question