JSFiddle - React, Tailwind, and code Playground

by Vladymyr Shevchuk

HTML

<div id="root"></div>

JavaScript

// export default
class DoubleSlider {
  constructor(selector, min, max) {
    this.container = document.querySelector(selector);
    this.leftSlider = document.createElement('span');
    this.leftSlider.classList.add('range-slider__thumb-left');
  }
  render() {
    let code = `<div class="range-slider">
                  <span>1$</span>
                  <div class="range-slider__inner">
                    <span class="range-slider__progress"></span>
                    ${this.leftSlider.outerHTML}
                    <span class="range-slider__thumb-right"></span>
                  </div>
                  <span>10$</span>
                </div>`;
    this.container.innerHTML = code;
    this.leftSlider.addEventListener('click', () => {alert(1)});
  }
}

const slider = new DoubleSlider('#root', 100, 200);

console.error();