Font awesome icon not changing in response to the slider change

user_12151505 0
Viewed 62

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 errors

icons jquery javascript
2 Answers

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>

user_150326880

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>

user_4012780
Related