未捕获的TypeError：无法读取HTMLInputElement Oninput上未定义的属性“值”

Question

我有错误，无法理解为什么会发生

var range_slider = document.querySelectorAll(".slider");
var range_output = document.querySelectorAll(".value");
for (var i =0, l=range_slider.length; i<l; i++) {
    range_output[i].innerHTML = range_slider[i].value;
    range_slider[i].oninput = function() {
        range_output[i].innerHTML = range_slider[i].value;
    }
}

并收到此错误：“未捕获的TypeError：无法读取HTMLInputElement.range_slider。（匿名函数）.oninput上未定义的属性'value'的最后一行。

我尝试了没有for循环的代码，一切都很好：

range_output[0].innerHTML = range_slider[0].value;
range_slider[0].oninput = function() {
    range_output[0].innerHTML = range_slider[0].value;
}
range_output[1].innerHTML = range_slider[1].value;
range_slider[1].oninput = function() {
    range_output[1].innerHTML = range_slider[1].value;
}

有人知道为什么吗？