Quality Control

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<div id="player">
  <div id="controls">
    <div id="progress"></div>
    <div id="progressTime">2:13</div>
    <div id="qualityButton" class="button">
      HD
      <div id="qualitySlider">
        <div id="qualityReadout">1p</div>
        <div id="qualityBarBackground"></div>
        <div id="qualityBar"></div>
        <div id="qualityHandle"></div>
      </div>
    </div>
    <div id="captionsButton" class="button">CC</div>
    <div id="volumeButton" class="awesome">&#61480;</div>
    <div id="fullscreenButton" class="awesome">&#61541;</div>
  </div>
</div>

CSS

#player {
  width: 840px;
  height: 480px;
  background: black;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
#controls {
  width: 100%;
  height: 40px;
  background: #1A1A1A;
  display: flex;
  align-items: center;
  color: #fff;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
}
#progress {
  flex-grow: 1;
  height: 4px;
  background: #484848;
  margin: 0 16px;
}
#progressTime {
  margin-right: 16px;
}
.button {
  color: #000;
  background: #F8F8F8;
  border-radius: 2px;
  font-size: 12px;
  padding: 2px 6px;
  margin-right: 16px;
  cursor: pointer;
}
.awesome {
  font-family: 'FontAwesome';
  font-size: 18px;
  margin-right: 16px;
  cursor: pointer;
}
#qualityButton {
  position: relative;
}
#qualitySlider {
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 100px;
  transform: translateY(-100%);
  background: #1A1A1A;
  cursor: default;
}
#qualityReadout {
  color: white;
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
}
#qualityHandle {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: white;
}
#qualityBarBackground {
  position: absolute;
  bottom: 4px;
  left: 12px;
  right: 12px;
  height: 92px;
  background: #484848;
}
#qualityBar {
  position: absolute;
  bottom: 4px;
  left: 12px;
  right: 12px;
  height: 0;
  background: #bbb;
}
* {
  -moz-user-select:none;
}

JavaScript

var dragging = false;
var previousPosition = 0;
var height = 0;
$("#qualityHandle").mousedown(function(e){
	dragging = true;
  previousPosition = e.pageY;
});
$(document).mousemove(function(e){
	var change = previousPosition - e.pageY;
  previousPosition = e.pageY;
  if(dragging) {
    height += change;
    height = Math.min(height, 77);
    height = Math.max(height, 0);
    console.log(change);
    $("#qualityHandle").css("bottom", 4 + height + "px");
    $("#qualityBar").css("height", height / 77 * 92 + "px");
    $("#qualityReadout").text(Math.round(height / 77 * 1079) + 1 + "p");
	}
});
$(document).mouseup(function(){
	dragging = false;
});