124 lines
2.4 KiB
CSS
124 lines
2.4 KiB
CSS
/* Horizontal */
|
|
.slider {
|
|
@apply relative w-full;
|
|
touch-action: none;
|
|
}
|
|
|
|
.slider-horizontal {
|
|
@apply flex flex-col justify-center;
|
|
padding-block: 10px;
|
|
}
|
|
|
|
.slider-vertical {
|
|
@apply inline-flex flex-row justify-center;
|
|
padding-inline: 10px;
|
|
height: 200px;
|
|
}
|
|
|
|
.slider-disabled {
|
|
@apply opacity-50 pointer-events-none;
|
|
}
|
|
|
|
/* Track */
|
|
.slider-track {
|
|
@apply relative bg-gray-200 dark:bg-gray-700 rounded-full cursor-pointer;
|
|
}
|
|
|
|
.slider-horizontal .slider-track {
|
|
@apply w-full;
|
|
}
|
|
|
|
.slider-vertical .slider-track {
|
|
@apply h-full;
|
|
}
|
|
|
|
/* Fill */
|
|
.slider-fill {
|
|
@apply absolute bg-indigo-500 dark:bg-indigo-400 rounded-full;
|
|
top: 0;
|
|
bottom: 0;
|
|
}
|
|
|
|
.slider-vertical .slider-fill {
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
|
|
/* Handle */
|
|
.slider-handle {
|
|
@apply absolute rounded-full bg-white border-2 border-indigo-500
|
|
shadow-md cursor-grab z-10 outline-hidden
|
|
focus:ring-2 focus:ring-offset-1 transition-shadow duration-100
|
|
hover:shadow-lg;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.slider-vertical .slider-handle {
|
|
top: auto;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.slider-handle:active {
|
|
@apply cursor-grabbing shadow-lg;
|
|
}
|
|
|
|
.slider-handle-disabled {
|
|
@apply cursor-not-allowed;
|
|
}
|
|
|
|
/* Tooltip */
|
|
.slider-tooltip {
|
|
@apply absolute -top-8 left-1/2 -translate-x-1/2
|
|
px-1.5 py-0.5 text-xs font-medium
|
|
bg-gray-800 dark:bg-gray-200
|
|
text-white dark:text-gray-900
|
|
rounded-sm whitespace-nowrap pointer-events-none z-20;
|
|
}
|
|
|
|
.slider-tooltip::after {
|
|
content: '';
|
|
@apply absolute left-1/2 -translate-x-1/2 -bottom-1;
|
|
border: 4px solid transparent;
|
|
border-top-color: var(--color-gray-800);
|
|
}
|
|
|
|
.dark .slider-tooltip::after {
|
|
border-top-color: var(--color-gray-200);
|
|
}
|
|
|
|
/* Marks */
|
|
.slider-marks {
|
|
@apply relative w-full mt-2;
|
|
height: 20px;
|
|
}
|
|
|
|
.slider-marks-vertical {
|
|
@apply h-full ml-2 mt-0;
|
|
width: 20px;
|
|
}
|
|
|
|
.slider-mark-wrapper {
|
|
@apply absolute flex flex-col items-center -translate-x-1/2;
|
|
}
|
|
|
|
.slider-marks-vertical .slider-mark-wrapper {
|
|
@apply flex-row translate-x-0 -translate-y-1/2;
|
|
}
|
|
|
|
.slider-mark-dot {
|
|
@apply w-2 h-2 rounded-full bg-gray-300 dark:bg-gray-600;
|
|
}
|
|
|
|
.slider-mark-dot-active {
|
|
@apply bg-indigo-400 dark:bg-indigo-500;
|
|
}
|
|
|
|
.slider-mark-label {
|
|
@apply text-xs text-gray-500 dark:text-gray-400 mt-1 whitespace-nowrap;
|
|
}
|
|
|
|
.slider-marks-vertical .slider-mark-label {
|
|
@apply mt-0 ml-1;
|
|
}
|