aquamarin rangepicker

.rangepicker {
  padding: 10px 10px 20px;
}

.rangepicker__slider {
  background-color: #e6e3e3;
  border: none;
  border-radius: 0;
  box-shadow: none;
  box-shadow: inset .5px .9px 1px rgba(0, 0, 0, .14);
  height: 7px;
}

.rangepicker__slider .noUi-background {
  background-color: #e6e3e3;
  border-radius: 0;
  box-shadow: inset .5px .9px 1px rgba(0, 0, 0, .14);
}

.rangepicker__slider .noUi-connect {
  background-color: #00bcf4;
  box-shadow: none;
}

.rangepicker__slider .noUi-handle {
  background-color: #f3f5f6;
  background-image: linear-gradient(to top, rgba(0, 0, 0, .01) 0%, rgba(255, 255, 255, .01) 100%);
  border: none;
  border-radius: 50%;
  border-radius: 50%;
  box-shadow: .5px .9px 3px rgba(0, 0, 0, .22);
  display: inline-block;
  height: 18px;
  left: -9px;
  top: -6px;
  width: 18px;
}

.rangepicker__slider .noUi-handle:hover:before {
  background-color: #0095c1;
}

.rangepicker__slider .noUi-handle:active:before {
  background-color: #0081a8;
}

.rangepicker__slider .noUi-handle:before {
  background-color: #00bcf4;
  border-radius: 50%;
  box-shadow: inset .5px .9px 1px rgba(0, 0, 0, .3);
  content: '';
  height: 8px;
  left: 50%;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  transition: all .3s ease;
  width: 8px;
}

.rangepicker__slider .noUi-handle:after {
  background-color: transparent;
  color: #00bcf4;
  content: attr(data-value);
  font-size: 12px;
  height: auto;
  left: 50%;
  margin-top: 3px;
  top: 100%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  width: auto;
}