@msdoc11

Как переделать double range slider, чтобы использовать несколько на странице?

Здравствуйте, пытался переделать данный код, чтобы можно было использоваться несколько таких слайдеров на странице, но не получилось, как правильно это сделать?

Сам код https://codepen.io/msdoc11/pen/GRdXMzL
  • Вопрос задан
  • 52 просмотра
Решения вопроса 1
mizutsune
@mizutsune
Frontend Developer
Как вариант, можно обернуть элементы управления, инпуты и сам слайдер в родительский контейнер, с определенным id атрибутом или классом. Далее нужно обернуть код слайдера в функцию и передавать в эту функцию в качестве аргумента селектор родительского контейнера. Таким образом можно будет привязать функцию к элементу разными способами.

Например так:

slider("#target-element-id-1");
slider("#target-element-id-2");


Или если слайдеров много и у них одинаковый класс, тогда можно так:

document.querySelectorAll(".element").forEach(n => slider(n));


Пример:

Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы