How to make multiple sliders work?

Question

css

Greetings! There is such slider js code https://codepen.io/i-did/pen/yLYRvVL There should be several such sliders on the page, how can I duplicate them so that they work fine?

Answer 1

Isolate all code in some context. Next, pass the slider container to this context. And in the code itself, search for control elements not globally in the document, but only within the passed container.
Something like this:

function makeSlider(slider) {
  ...
}

document.querySelectorAll('.slider').forEach(makeSlider)