.range-container {
  height: 2rem;
  display: flex;
  align-items: center;
  position: relative;
  flex-direction: column;
}
.slider {
  height: 100%;
  position: relative;
  background: #ddd;
  width: 100%;
  border-radius: 5px;
  transform: translateY(-50%);
}
.slider .progress {
  height: 2px;
  position: absolute;
  border-radius: 5px;
  background: #272836;
}
.range-input {
  position: absolute;
  width: 100%;
}
.range-input.single-value input:last-child {
  transform: translate(100%, -100%);
}
.range-input input {
  position: absolute;
  width: 100%;
  height: 5px;
  top: 0%;
  transform: translateY(-100%);
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
input[type='range']::-webkit-slider-thumb {
  height: 0.7rem;
  width: 0.7rem;
  border-radius: 50%;
  background: #272836;
  pointer-events: auto;
  -webkit-appearance: none;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
}
input[type='range']::-moz-range-thumb {
  height: 17px;
  width: 17px;
  border: none;
  border-radius: 50%;
  background: #17a2b8;
  pointer-events: auto;
  -moz-appearance: none;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
}
input::placeholder {
  color: white;
}