Font awesome icon not changing in response to the slider change

Question

I'm trying to change the icon in response to the volume control (range) element and can't make it work.

My html is:

<div class="slidercontainer fs-4" id="slider-container">
    <span style="color:white;">&nbsp;&nbsp;&nbsp;&nbsp;</span>
    <span class="badge rounded-pill bg-warning">Audio Volume</span>  
    <span style="color:white;">&nbsp;&nbsp;&nbsp;&nbsp;</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>

... and it is shown correctly in a browser

My javascript is:

// 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 slider

Doesn't work (icon not changing in the leftmost position as required), not showing any error s

Answer 1

In the example below, three different icon changes are provided according to the sound status. Class styles previously applied to the <i> element are removed and new class styles are assigned.

 /* 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;">&nbsp;&nbsp;&nbsp;&nbsp;</span> <span class="badge rounded-pill bg-warning">Audio Volume</span> <span style="color:white;">&nbsp;&nbsp;&nbsp;&nbsp;</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>

Answer 2

You did mistake targeting the i.

No need .find("i") because you already did it with $('#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;">&nbsp;&nbsp;&nbsp;&nbsp;</span> <span class="badge rounded-pill bg-warning">Audio Volume</span> <span style="color:white;">&nbsp;&nbsp;&nbsp;&nbsp;</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>