Как я могу создать отзывчивые слайдеры диапазона HTML, используя JS

Question

Мне надоело создавать множество ползунков range, затем создавать элементы p для отображения его значения, затем назначать каждому из них странный id, явно инициализировать их в js и обновлять p каждый раз.

Вот конструктор Slider, который я придумал:

class Slider {
    constructor(min, max, value) {

        // create slider
        let slider = document.createElement('input');
        slider.type = 'range';
        slider.min = min;
        slider.max = max;
        slider.value = value;

        // create paragraph
        let p = document.createElement('p');
        p.style.display = 'inline';
        p.innerHTML = slider.value;

        // append them
        document.body.appendChild(slider);
        document.body.appendChild(p);

        // update paragraph on slider input
        slider.oninput = () => {
            p.innerHTML = slider.value;
		}
		
		this.value = () => { return slider.value; }
	} 
}

mySlider = new Slider(-100, 100, 50);

Я не очень опытный кодер и поэтому просто хотел знать, это нормально? Это фактически решает мою проблему, но эффективно ли это, или вы можете дать некоторые предложения, может быть, какие-то другие профессиональные решения для этого, которые я могу реализовать в js (я не спрашиваю о библиотеках)?