How to change the color of a span tag dynamically?

Question

I am trying to build a slider. The Slider has a range of between 0 and 30 jumping 10 steps each time, so: 0, 10, 20, 30. At each of these 4 levels I've placed an empty circle. Currently, whenever I click on a level on the slider, the relevant part of the slider is painted in the expected colour. For example, a click on level 10, means the slider is painted in the given colour from 0-10. What I'm now trying to do is, getting the circles within a clicked level to have the same colour too, for instance I click level 10, and get circles placed at 0 and 10 to have the same colour too. I have the following code, that I've so far worked on:

function sliderVal(range){

    var nodes=document.getElementsByClassName("dot");
    for (let i=0;i


input[type=range] {
  width: 100%;
  margin: 3.9px 0;
}

input[type="range"]:focus {
  outline: none;  
  }
 input[type="range"]{
    -webkit-appearance: none;
    -moz-apperance: none;
    border-radius: 11px;
    height: 11px;
    background-image: -webkit-gradient(
        linear,
        left top,
        right top,
        color-stop(0.15, #84b7e3),
        color-stop(0.15, #DADDe3)
    );
}


input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    /*background-color: #E9E9E9;*/
    /*border: 1px solid #CECECE;**/

  box-shadow: 0px 0px 0.5px #000000, 0px 0.6px 1px #0d0d0d;
  border: 0px solid #000000;
  width: 20.035px;
  border-radius: 50px;
  background: #3072ac;
  cursor: pointer;
  margin-top: 0px;  
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 11px;
  cursor: pointer;
  box-shadow: 0.2px 0.2px 0px rgba(0, 0, 0, 0), 0px 0px 0.2px rgba(13, 13, 13, 0);
  background: #DADDe3;
  border-radius: 1.3px;
  border: 0px solid #010101;
}
input[type="range"]::-moz-range-progress {
  height: 11px;
  background-color: #84b7e3; 
}
input[type=range]::-moz-range-thumb {
  box-shadow: 0px 0px 0.5px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 18px;
  width: 18px;
  border-radius: 50px;
  background: #3072ac;
  cursor: pointer;
}

input[type=range]::-ms-track {
  width: 100%;
  height: 11px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #6fabde;
  border: 0px solid #010101;
  border-radius: 2.6px;
  box-shadow: 0.2px 0.2px 0px rgba(0, 0, 0, 0), 0px 0px 0.2px rgba(13, 13, 13, 0);
}
input[type=range]::-ms-fill-upper {
  background: #84b7e3;
  border: 0px solid #010101;
  border-radius: 2.6px;
  box-shadow: 0.2px 0.2px 0px rgba(0, 0, 0, 0), 0px 0px 0.2px rgba(13, 13, 13, 0);
}
input[type=range]::-ms-thumb {
  box-shadow: 0px 0px 0.5px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 18px;
  width: 18px;
  border-radius: 50px;
  background: #3072ac;
  cursor: pointer;
  height: 11px;
}
input[type=range]:focus::-ms-fill-lower {
  background: #84b7e3;
}
input[type=range]:focus::-ms-fill-upper {
  background: #99c3e8;
}

.dot {
  height: 20px;
  width: 20px;
  background-color: #DADDe3;
  border-radius: 50%;
  display: inline-block;
}

#slider1{
    position:absolute;
    top: 77%;
    left: 0%;
}

#slider2{
    position:absolute;
    top: 77%;
    left: 10%;
}

#slider3{
    position:absolute;
    top: 77%;
    left: 20%;
}
#slider3{
    position:absolute;
    top: 77%;
    left: 30%;
}




Unfortunately my clicklistener in the js file is not doing its job and the circles don't change their colour. As you can see, to create circles I used an empty span tag. I am completely new to HTML/Javascript and have the feeling I could/should have used something other than the span tag for what I want. Is there a way to make these span tags change their background color by modifying the above code? or should I use something else (maybe a circle icon or something) for that purpose? I know this isn't an original question. But answers to similar questions I found at Change color of span tag depending on value and also w3schools at https://www.w3schools.com/js/js_htmldom_css.asp didn't really help so far. Any suggestions?

Amin Jafari · Accepted Answer

So you need to change the onClick to onchange notice all lowercase which is the html property name for the event handler and then pass the function with the value as this.value so you'll end up with:

and js

function sliderVal(range){
    var nodes=document.getElementsByClassName("dot");
    for (let i=0;i



Working DEMO

How to change the color of a span tag dynamically?

Answers (2)

Related Questions