Si quisiera usar un componente 20 veces en mi página (por ejemplo, el siguiente, que es un cuadro con 4 controles deslizantes de rango), ¿hay alguna manera de hacerlo sin escribir este código 20 veces? ¿Hay algo similar al componente de reacción en html? ¡Gracias!

 <div class = "slidecontainer" id = sliders> <br> <label for = "Slider A"><input type = "range" min = "0" max = "100" value = "0" class = "slider" id = "slider_A"> &nbsp; <span id = "slider-value-A"></span></label><br> <label><input type = "range" min = "0" max = "100" value = "0" class = "slider" id = "slider_B"> &nbsp; <span id = "slider-value-B"></span> &nbsp; </label><br> <label><input type = "range" min = "0" max = "100" value = "0" class = "slider" id = "slider_C"> &nbsp; <span id = "slider-value-C"></span> &nbsp; </label><br> <label><input type = "range" min = "0" max = "100" value = "0" class = "slider" id = "slider_D"> &nbsp; <span id = "slider-value-D"></span> &nbsp; </label> </div>

¡Gracias!