Block with hidden content, what am I doing wrong?

Question

css

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 1

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
  };
}