nft-range-slider
Version:
A highly customized slider component
62 lines (52 loc) • 1.05 kB
CSS
.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 */