window.addEventListener("load", function () {
    let ranges_list = document.querySelectorAll(".range_to_info");
    ranges_list.forEach((item) => {
        addRangeInfoDiv(item)
        item.addEventListener("change", getRangeValue)
    });
});

function getRangeValue(){
    let value = this.value;
    let id = this.id;
    let span = document.getElementById(`value_range_span_${id}`);
    span.innerHTML = value;
}

function addRangeInfoDiv(range_obj){
    let id = range_obj.id;
    let div = document.createElement("div");
    div.style.display = "flex";
    let span_value = document.createElement("span");
    let span_min = document.createElement("span");
    let span_max = document.createElement("span");
    span_value.setAttribute("id", `value_range_span_${id}`);
    span_min.setAttribute("id", `min_range_span_${id}`);
    span_max.setAttribute("id", `max_range_span_${id}`);
    span_value.innerHTML = range_obj.value;
    span_value.setAttribute("style", "flex: 1; text-align: right; white-space: nowrap;")
    span_min.innerHTML = `min: ${range_obj.getAttribute("min")}  `;
    span_max.innerHTML = `max: ${range_obj.getAttribute("max")}  `;
    div.appendChild(span_min);
    div.appendChild(span_max);
    div.appendChild(span_value);
    range_obj.parentNode.appendChild(div);
}