const input_min = document.querySelector("#customRange1")
const input_max = document.querySelector("#customRange2")
const value_min = document.querySelector("#score_min_value")
const value_max = document.querySelector("#score_max_value")
input_min.addEventListener("input", (event) => {
    value_min.textContent = event.target.value
    input_max.setAttribute("min", event.target.value)
})
input_max.addEventListener("input", (event) => {
    value_max.textContent = event.target.value
    input_min.setAttribute("max", event.target.value)
})

const range_enabler = document.querySelector("#range_enabler")
range_enabler.addEventListener("click", (event) => {
    //if range_enabler is checked, then enable the range
    //if range_enabler is unchecked, then disable the range
    if (range_enabler.checked) {
        input_min.disabled = false
        input_max.disabled = false
    } else {
        input_min.disabled = true
        input_max.disabled = true
    }
})