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

Question

[msdoc11]

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

Сам код https://codepen.io/msdoc11/pen/GRdXMzL

Answer 1

[Dino Winchester]

Как вариант, можно обернуть элементы управления, инпуты и сам слайдер в родительский контейнер, с определенным id атрибутом или классом. Далее нужно обернуть код слайдера в функцию и передавать в эту функцию в качестве аргумента селектор родительского контейнера. Таким образом можно будет привязать функцию к элементу разными способами.

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

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

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

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

Пример:

Comments

[msdoc11]

не подскажете как поправить progress когда устанавливаешь min например 1000, из за этого progress уезжает от ползунка в сторону