/* ʱ´úJava - https://NowJava.com */
html, body {
  margin: 0;
  background: #111;
  height: 100%;
  width: 100%;
}

#container {
  width: 600px;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
}
#container #bar {
  width: 100%;
  height: 18px;
  border-radius: 15px;
  box-shadow: 0 0 0 4px white;
  background: linear-gradient(to right, #F0C11D, #ED5A50, #E7087B, #722AAA, #5398F5);
}
#container #dial {
  width: 18px;
  height: 30px;
  margin-top: -2px;
  box-shadow: 0 0 0 4px white, 0 0 6px 6px rgba(0, 0, 0, 0.4);
  border-radius: 12px;
  background: #F0C11D;
  position: absolute;
  top: -4px;
  left: 50px;
  transition: 0.1s;
}
#container input {
  display: none;
}
#container label {
  color: white;
  font-family: sans-serif;
  font-weight: bold;
  letter-spacing: 1px;
  width: calc(40vw/5);
  display: block;
  float: left;
  text-align: center;
  margin-top: 1rem;
}
#container label:hover {
  cursor: pointer;
}
#container input:nth-of-type(1):checked + label ~ #dial {
  left: 48.4px;
  background: #F0C11D;
}
#container input:nth-of-type(2):checked + label ~ #dial {
  left: 163.2px;
  background: #ED5A50;
}
#container input:nth-of-type(3):checked + label ~ #dial {
  left: 278px;
  background: #E7087B;
}
#container input:nth-of-type(4):checked + label ~ #dial {
  left: 392.8px;
  background: #722AAA;
}
#container input:nth-of-type(5):checked + label ~ #dial {
  left: 507.6px;
  background: #5398F5;
}