change div based on slider value

Trying to trigger a function based on the position of a slider. I've tried several different ways. What am I missing here? Here's my code (below). Html

<div id="box">Box</div>
<form oninput="amount.value=rangeInput.value">
        <input type="range" id="rangeInput" name="rangeInput" step="20" value="0" onchange="updateValue()">
        <div align="center" style="font-size:25px;">
            <output name="amount" for="rangeInput">0</output>
        </div>
    </form>

Here's the CSS

#box{
    position:absolute;
    width:100px;
    height:100px;
    background:#ffffff;}


input[type="range"] {
  -webkit-appearance: none;
  width: 600px;
  height: 25px;
  border: 1px solid;
  background-color: #555555;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 25px;
  height: 25px;
  border: 1px solid;
  background-color: #FFF;
  z-index:6000;
}

Here's the javascript

slider.oninput = function() {
  output.innerHTML = this.value;
}

function updateValue() {
  var rangeInput = document.getElementById("myRange").value
  if (rangeInput == 20) {
    $("#box").css({'background':'red'});

  }
  if (rangeInput == 40) {
    $("#box").css({'background':'blue'});

  }
    if (rangeInput == 60) {
    $("#box").css({'background':'pink'});

  }
    if (rangeInput == 80) {
    $("#box").css({'background':'green'});

  }
}

I can't figure out what I am doing wrong.