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>
    )
};

I am trying to make an image range slider like on W3 schools, but rather than html/css/js in an html doc like them, I was hoping to do it in a Javascript function in my React Website. When the lines above are uncommented, the whole page goes blank.The CSS works so the problem is just in the Javascript and HTML. Any suggestions would be appreciated :D

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