javascript范围滑块使页面在取消部分菜单时变为空白

function RangeSlider() {

    var ranger = document.getElementById("ranger");
    var output = document.getElementById("output");
    var cost = document.getElementById("cost");
    // output.value = ranger.value;
    // cost.value = output.value * 10;

    // ranger.oninput = function() {
    //     output.value = this.value
    //     cost.value = output.value * 10}
    return(
        <div class="rangecontainer">
            <p class="numerichours">Hours: <span ref={output}></span></p>
            <input type="range" min="1" max="100" value="10" class="range" ref={ranger}/>
            <p class="numerictext">Estimated Cost $: <span ref={cost}></span></p>
        </div>
    )
};

我试图在W3学校制作一个图像范围滑块，但我希望在React网站的Javascript函数中实现，而不是在html文档中使用html/css/js。当上面的行没有注释时，整个页面将变为空白。CSS是有效的，所以问题只存在于Javascript和HTML中。如有任何建议，将不胜感激：D

https://www.w3schools.com/howto/howto_js_rangeslider.asp