JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div style="width: 100%; height: 50px; background-color: grey; position: absolute; top: 220px;">
</div>
<div id="volumebar">
  <div id="volume"></div>
</div>
<div id="display"><img src="https://image.ibb.co/ktNgTF/volume.png" id="icon"></div>
<div id="indicator">0</div>
<div id="target" class="bar"></div>

CSS

.bar {
  background-image: url(https://image.ibb.co/kRCN3F/handle3.png);
  position: absolute;
  top: 20px;
  left: 225px;
  width: 80px;
  height: 107px;
  z-index: -1000;
}

#volumebar {
  border: 7px solid darkgrey;
  border-top: 20px solid darkgrey;
  position: absolute;
  top: 107px;
  left: 250px;
  width: 15px;
  height: 100px;
  background-color: lightgrey;
}

#volume {
  width: 100%;
  height: 1%;
  background-color: #22dd22;
  position: absolute;
  bottom: 0;
  left: 0;
}

#icon {
  height: 50px;
  width: 50px;
  position: absolute;
  top: 225px;
  left: 240px;
}

#indicator {
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  color: #ddd;
  position: absolute;
  top: 108px;
  left: 245px;
  text-align: center;
  width: 40px;
  height: 20px;
}

JavaScript

var last = 0;
var volume = 35;
$("#indicator").text(volume);
$("#volume").height(volume + "%");
window.setInterval(function() {
  if (volume > 0) volume--;
  $("#indicator").text(volume);
  $("#volume").height(volume + "%");
}, 200);
$("#target").draggable({
  drag: function(event, ui) {
    var pos = ui.position.top;
    if (pos > last && volume < 100 && (pos % 2 == 0)) {
      volume++;
    }
    last = pos;
    console.log(ui.position.top);
    $("#indicator").text(volume);
    $("#volume").height(volume + "%");
  },
  containment: [225, 20, 305, 80],
  axis: "y"
});