.slider {
  position: absolute;
  z-index: 100;
  top: -50%;
  left: 50%;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: translate3d(-50%, 0, 0);
  transition: opacity 0.1s;
}

.slider:hover {
  opacity: 1 !important;
}

/* increase hover area for slide handle */
.hover {
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 200%;
}

.hover:hover + .slider {
  opacity: 1 !important;
}

.handle {
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 100%;
  box-shadow: 0px 0px 0px 1px var(--color-blue) inset;
  touch-action: none;
  transition: opacity 0.1s;
}

.handle[data-down="true"]::before {
  position: absolute;

  top: 100%;
  left: calc(50% + 1px);
  height: 32px;
  border-left: 1px dashed var(--color-blue);
  content: "";
  transform: translateX(calc(-50% - 1px));
}

.glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 32px;
  background: #fff;
  border-radius: 100%;
  box-shadow: 0px 0px 32px 32px #ffffff;
}
