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> ) };Estoy tratando de hacer un control deslizante de rango de imagen como en las escuelas W3, pero en lugar de html/css/js en un documento html como ellos, esperaba hacerlo en una función Javascript en mi sitio web React. Cuando las líneas anteriores no están comentadas, toda la página queda en blanco. El CSS funciona, por lo que el problema está solo en Javascript y HTML. Cualquier sugerencia sería apreciada :D