Пашенька

Фигуры на канвасе не являются чем-то осязаемым, чтобы на них можно было навешивать будь то события или что-то бы то ни было. Их нельзя "потрогать", как ноды в DOM дереве. На канвасе у вас есть только система координат, по ней и ориентируйтесь.

let target = document.querySelector('#search');
let timerId = null;

target.oninput = function () {
	let inputValue = this.value.trim();
	let lastTime = performance.now();

	if (timerId) {
		clearTimeout(timerId);
	}

	timerId = setTimeout(function() {
		if (performance.now() - lastTime > 1500 && inputValue) {
			console.log('Send', inputValue);
		}
	}, 1500);

}

А шо, наличие атрибута как-то спасёт от того, чтобы не положили сервер?
Открою вам тайну: любую проверку на Front-End можно обойти.
Если целью будет положить сервер, то уж точно не таким образом его будут класть.

Вы воткнули ссылку на html страницу, а не на джифку, джифка доступно по ссылке https://media1.giphy.com/media/10FwycrnAkpshW/giphy.gif, то есть код должен быть таким:

<img src="https://media1.giphy.com/media/10FwycrnAkpshW/giphy.gif" alt="я джифка">

for (var i = 0, elems = document.querySelectorAll('.table_wrapper'); i < elems.length; i++) {
    elems[i].scrollLeft = elems[i].scrollWidth - elems[i].clientWidth;
}

document.querySelector('.custom-select-wrapper').addEventListener('click', function() {
    this.querySelector('.custom-select').classList.toggle('open');
})

for (const option of document.querySelectorAll(".custom-option")) {
    option.addEventListener('click', function() {
        if (!this.classList.contains('selected')) {
            this.parentNode.querySelector('.custom-option.selected').classList.remove('selected');
            this.classList.add('selected');
            this.closest('.custom-select').querySelector('.custom-select__trigger span').textContent = this.textContent;
            this.parentElement.previousElementSibling.style.backgroundImage = getComputedStyle(this).backgroundImage;
        }
    })
}

window.addEventListener('click', function(e) {
    const select = document.querySelector('.custom-select');
    if (!select.contains(e.target)) {
        select.classList.remove('open');
    }
});

Переписал ваш код на более рациональный:

const select = document.querySelector('.custom-select');

(function() {
    let input = select.firstElementChild,
        text = input.querySelector('span'),
        options = select.lastElementChild;
        
    select.addEventListener('click', function(ev) {
        this.classList.toggle('open');
        let el = ev.target;
        if (el.classList.contains('custom-option')) {
            options.querySelector('.selected').classList.remove('selected');
            el.classList.toggle('selected');
            text.textContent = el.textContent;
            input.style.backgroundImage = getComputedStyle(el).backgroundImage;
        }
    });
})();
 
window.addEventListener('click', function(e) {
    if (!select.contains(e.target)) {
        select.classList.remove('open');
    }
});

img {
    object-fit: cover;
}

1. Именно потому что вы используете какие-то библиотеки, считаете написание подобной формы велосипедом и прочие глупые мысли, вы и оказываетесь на данном ресурсе в качестве вопрошающего.
2. Генерировать JavaScript'ом из данных, о которых речь в следующем пункте.
3. JSON. Формируете массив ДжаваСкрипт объектов аля:

[
    {
        "Mercedes": {
            "E-class": {
                "тут уж": "на что фантазии хватит"
            },
            "C-class": {
                "тут уж": "на что фантазии хватит"
            },
            "S-class": {
                "тут уж": "на что фантазии хватит"
            },
        }
    },
    {
        "Porsche": {
            "911": {
                "тут уж": "на что фантазии хватит"
            },
            "928": {
                "тут уж": "на что фантазии хватит"
            },
            "944": {
                "тут уж": "на что фантазии хватит"
            },
        }
    }
]

И генерируете на его основании форму. Над структурой нужно подумать хорошенько, чтобы с годом не было больно потом. Можно как с бекенда получать данные, так и иметь на фронте все данные, решать задачу можно сколь угодно вариативно в зависимости от нюансов. It's up to you.

Изучить HTML. Атрибут target, отвечающий за открытие ссылки в новом окне, принадлежит тегу a.

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

outline: none;

Никак.

Потому что элемент спозиционированный как absolute выпадает из потока документа. Теперь родитель будет вести себя так, словно у него нет детей. Можно сказать, родитель отказался от своего ребёнка.

Вероятнее всего это не отступ, а vertical-align

Тэги где-то криво закрыты.
И, очевидно, что как раз таки на английской версии у вас, как должно быть, а русская свёрстана неправильно.

EN:


RU:

Главное придерживаться н̶е̶к̶о̶т̶о̶р̶о̶г̶о̶ ̶п̶л̶а̶н̶а̶ единого правила. Я использую БЭМ, id пишу в camelCase. Хочешь быть как я, тоже пиши так.

2 минуты спустя: *посмотрел свой код* У меня своя методология: в камелКейсе я, оказывается, пишу id для всяких submit'ов, в иных случаях id совпадают с классом чаще всего для простоты ориентирования. Не будь как я. Придерживайся единого правила.

Боже, больно на это смотреть

$('.main-header__info').click(function() {
  $(this).toggleClass('main-header__info__active');
  
  if ($(this).hasClass('main-header__info__active')) {
    $('.news__block').css({
      'display': 'none'
    });
    $('.main-header__mobile').css({
      'display': 'block'
    });

  } else {
    $('.news__block').css({
      'display': 'block'
    });
    $('.main-header__mobile').css({
      'display': 'none'
    });
  }

});

Как бы я написал:

document.querySelector('.main-header__info').onclick = function() {
  this.classList.toggle('main-header__info__active'); // не знаю, действительно ли вам нужен этот класс. Если нет, то можно убрать эту строку вовсе
  
  var blockNews = document.querySelector('.news__block'),
      headerMobile = document.querySelector('.main-header__mobile'); // Можно достать из этого замыкания и выбирать разово, но тогда переменные будут глобальными
           
  blockNews.style.display = getComputedStyle(blockNews).display === 'block' ? 'none' : 'block';
  headerMobile.style.display = getComputedStyle(headerMobile).display === 'none' ? 'block' : 'none';
}