Estoy tratando de cambiar el ícono en respuesta al elemento de control de volumen (rango) y no puedo hacerlo funcionar.
mi html es:
<div class="slidercontainer fs-4" id="slider-container"> <span style="color:white;"> </span> <span class="badge rounded-pill bg-warning">Audio Volume</span> <span style="color:white;"> </span> <i id="volume_low" class="fa fa-volume-down fa-2x"></i> <input type="range" min="0" max="2.5" value="0" step="0.1" class="slider" id="myRange"> <i id="volume-up" class="fa fa-volume-up fa-2x"></i> </div>... y se muestra correctamente en un navegador
Mi javascript es:
// for slider const slider = document.querySelector("#myRange"); $("#myRange").on("input change", function() { const sliderValue = slider.value; if(sliderValue==0){ console.log('zero', sliderValue ); $('#volume_low').find("i").toggleClass("fa fa-volume-off fa-2x fa fa-volume-down fa-2x"); }else { console.log('nonzero', sliderValue); $('#volume_low').find("i").toggleClass("fa fa-volume-down fa-2x fa fa-volume-off fa-2x"); } }); // end of for sliderNo funciona (el ícono no cambia en la posición más a la izquierda según sea necesario), no muestra ningún error
En el siguiente ejemplo, se proporcionan tres cambios de iconos diferentes según el estado del sonido. Los estilos de clase aplicados previamente al elemento <i> se eliminan y se asignan nuevos estilos de clase.
/* Global Variable; It is initialized using the context of the class implemented in the <i> element. */ let beforeClass = "off"; $("#myRange").on("input change", function() { const sliderValue = $("#myRange").val(); /* previously applied class styles are removed */ $('#volume_low').removeClass(`fa fa-volume-${beforeClass} fa-2x`); if(sliderValue == 0) { $('#volume_low').addClass("fa fa-volume-off fa-2x"); beforeClass = "off"; } else if(sliderValue > 0 && sliderValue <= 1) { $('#volume_low').addClass("fa fa-volume-down fa-2x"); beforeClass = "down"; } else if(sliderValue > 1) { $('#volume_low').addClass("fa fa-volume-up fa-2x"); beforeClass = "up"; } console.clear(); console.log(`Value: ${sliderValue}`); }); i { margin-left: 40px; width: 50px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <div class="slidercontainer fs-4" id="slider-container"> <span style="color:white;"> </span> <span class="badge rounded-pill bg-warning">Audio Volume</span> <span style="color:white;"> </span><br><br> <i id="volume_low" class="fa fa-volume-off fa-2x"></i> <input type="range" min="0" max="2.5" value="0" step="0.1" class="slider" id="myRange"> <i id="volume-up" class="fa fa-volume-up fa-2x"></i> </div>Te equivocaste al apuntar a la i.
No necesitas .find("i") porque ya lo hiciste con $('#volume_low')
// for slider const slider = document.querySelector("#myRange"); $("#myRange").on("input change", function() { const sliderValue = slider.value; if (sliderValue == 0) { console.log('zero', sliderValue ); $('#volume_low').removeClass('fa-volume-down').addClass("fa-volume-off"); } else { console.log('nonzero', sliderValue); $('#volume_low').removeClass('fa-volume-off').addClass("fa-volume-down"); } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <div class="slidercontainer fs-4" id="slider-container"> <span style="color:white;"> </span> <span class="badge rounded-pill bg-warning">Audio Volume</span> <span style="color:white;"> </span> <i id="volume_low" class="fa fa-volume-down fa-2x"></i> <input type="range" min="0" max="2.5" value="0" step="0.1" class="slider" id="myRange"> <i id="volume-up" class="fa fa-volume-up fa-2x"></i> </div>