nft-range-slider/theme/nft.css

A highly customized slider component

.vue-slider-rail {
  background: var(--color-06);
  border-radius: 15px;
}

/* process style */
.vue-slider-process {
  background-color: var(--color-main);
  border-radius: 15px;
}

/* mark style */
.vue-slider-mark {
  z-index: 4;
}

.vue-slider-mark-step {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: var(--color-main);
}

.vue-slider-mark-label {
  font-size: 14px;
  white-space: nowrap;
}

/* dot style */
.vue-slider-dot-handle {
  cursor: pointer;
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: var(--color-main);
  box-sizing: border-box;
}

.vue-slider-dot-handle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 200%;
  height: 200%;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  z-index: -1;
  transition: transform 0.2s;
}

.vue-slider-dot-handle-focus::after {
  transform: translate(-50%, -50%) scale(1);
}

.vue-slider-dot-handle-disabled {
  cursor: not-allowed;
}

/*# sourceMappingURL=nft.css.map */