.rangeslider,
.rangeslider__fill {
  display: block;
}

.rangeslider {
  position: relative;
}
input:not([disabled]) + .rangeslider {
  cursor: pointer;
}
.rangeslider::before {
  content: "";
  display: block;
  height: 100%;
  background: #dededf;
  box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.1);
  border-radius: 0 0 3px 3px;
}
.rangeslider--horizontal {
  height: 4px;
  margin-left: -8.5px;
  margin-right: -8.5px;
  padding-left: 8.5px;
  padding-right: 8.5px;
}
.rangeslider--vertical {
  width: 4px;
  min-height: 150px;
  max-height: 100%;
  height: 1px;
}
.rangeslider--disabled {
  opacity: 0.4;
}
.rangeslider__fill {
  background: #21ba72;
  position: absolute;
  border-radius: 0 0 3px 3px;
}
.rangeslider--horizontal .rangeslider__fill {
  top: 0;
  height: 100%;
}
.rangeslider--vertical .rangeslider__fill {
  bottom: 0;
  width: 100%;
}
.rangeslider__handle {
  background: #21ba72;
  border: 4px solid #fff;
  border-width: 4px;
  cursor: pointer;
  display: inline-block;
  width: 9px;
  height: 9px;
  position: absolute;
  box-shadow: 0 0 3px #777;
  border-radius: 50%;
}
.rangeslider__handle:active, .rangeslider--active .rangeslider__handle {
  background: #21ba72;
}
.rangeslider--horizontal .rangeslider__handle {
  top: 50%;
  transform: translateY(-50%);
  touch-action: pan-y;
}
.rangeslider--vertical .rangeslider__handle {
  left: 50%;
  transform: translateX(-50%);
  touch-action: pan-x;
}
input[type=range]:focus + .rangeslider .rangeslider__handle {
  box-shadow: 0 0 4px rgba(33, 186, 114, 0.9);
}