pkg-components
Version:
50 lines (44 loc) • 861 B
CSS
.wrapper {
position: fixed;
bottom: 20px;
right: 20px;
width: 120px;
height: 22px;
z-index: 1000;
user-select: none;
}
.track {
width: 100%;
height: 100%;
background: #e5e7eb;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
position: relative;
overflow: hidden;
}
.handle {
position: absolute;
height: 100%;
background: #ffffff;
border-radius: 8px;
box-shadow: 0 0 0 2px #3b82f6 inset, 0 2px 8px rgba(0,0,0,0.2);
cursor: grab;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s ease;
}
.handle:active {
cursor: grabbing;
}
.columns {
display: grid;
grid-template-columns: repeat(auto-fit, 4px);
gap: 4px;
}
.columns span {
width: 4px;
height: 14px;
background: #cbd5e1;
border-radius: 2px;
}