How to fix an issue in my javascript slider range?

Question

Hi I'm trying to fix an issue in my JavaScript and unfortunately I'm a little stuck on where I'm going wrong here.

I'm designing a slider where the sliders thumb changes to a different range which is currently 1 - 5. The issue is that I cannot seem to get the emojis to appear as they should when the slider changes.

Here is what I'm working with:

var slider = document.getElementById('myRange')

function onChange(event) {
  var x = event.target.value

  if (x <= 3) {
    slider.className = ''
  } else if (x > 3 && x <= 6) {
    slider.className = 'MyClass-1'
  } else if (x > 6) {
    slider.className = 'MyClass-2'
  } else if (x > 6) {
    slider.className = 'MyClass-3'
  }
}

input[type=range] {
  -webkit-appearance: none;
    height: 20px;
    width: 200px;
    max-width: 100%;
    margin: 25px auto;
    background: #08121c;
    border: 3px solid #08121c;
    border-radius: 100px;
    display: block;
}

input[type=range]:focus {
  outline: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: none;
  height: 35px;
  width: 35px;
  border-radius: 100%;
  background-color: transparent;
  background-image: url(http://d1cxtglzz1rb2m.cloudfront.net/emoji/SVG/18-slightly-smiling-face.svg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100%;
}

input[type="range"].MyClass-1::-webkit-slider-thumb {
  background-image: url(http://d1cxtglzz1rb2m.cloudfront.net/emoji/SVG/06-grinning-face-with-smiling-eyes.svg);
}

input[type="range"].MyClass-2::-webkit-slider-thumb {
  background-image: url(http://d1cxtglzz1rb2m.cloudfront.net/emoji/SVG/12-smiling-face-with-sunglasses.svg);
}

input[type="range"].MyClass-3::-webkit-slider-thumb {
  background-image: url(http://d1cxtglzz1rb2m.cloudfront.net/emoji/SVG/13-smiling-face-with-heart-eyes.svg);
}

 <div class="slider-bar">
                                            <input type="range" id="myRange" min="1" max="5" value="1" />
                              
                                        </div>

Answer 1

replace you JS script with this code and it should work. however you do need to fix your if statement

  var slider = document.getElementById("myRange");


  slider.addEventListener('mouseup', function(event) {
    var x = event.target.value
    console.log(x)
    if (x <= 3) {
      slider.className = ''
    } else if (x > 3 && x <= 4) {
      slider.className = 'MyClass-1'
    } else if (x > 4) {
      slider.className = 'MyClass-2'
    } else if (x > 5) {
      slider.className = 'MyClass-3'
    }
  }) 

Answer 2

What is going on with this function?:

function onChange(event) {
  var x = event.target.value

  if (x <= 3) {
    slider.className = ''
  } else if (x > 3 && x <= 6) {
    slider.className = 'MyClass-1'
  } else if (x > 6) {
    slider.className = 'MyClass-2'
  } else if (x > 6) {
    slider.className = 'MyClass-3'
  }
}

The last else if will never execute.

EDIT: If x is the integer that is the same number you want to match the class, you can simply replace all the code above with

slider.className = `MyClass-${x}`;

Answer 3

Your JS onchange event is not wired to anything. Try this

var slider = document.getElementById('myRange')

slider.onchange = function(event) {
  var x = event.target.value

  if (x <= 3) {
    slider.className = ''
  } else if (x > 3 && x <= 6) {
    slider.className = 'MyClass-1'
  } else if (x > 6) {
    slider.className = 'MyClass-2'
  } else if (x > 6) {
    slider.className = 'MyClass-3'
  }

JSFiddle

Your conditional statements need some work though, as they will not all be executed. Perhaps something like this:

slider.onchange = function(event) {
  var x = event.target.value

  if (x <= 3) {
    slider.className = ''
  } else if (x > 3 && x <= 4) {
    slider.className = 'MyClass-1'
  } else if (x > 4) {
    slider.className = 'MyClass-2'
  } else if (x > 5) {
    slider.className = 'MyClass-3'
  }
}