atproto blogging
nonbinary.computer
1.slider {
2 position: relative;
3 display: flex;
4 width: 200px;
5 align-items: center;
6 padding: 0.5rem 0;
7 touch-action: none;
8}
9
10.slider[data-orientation="vertical"] {
11 width: auto;
12 height: 200px;
13 flex-direction: column;
14}
15
16.slider-track {
17 position: relative;
18 height: 0.5rem;
19 box-sizing: border-box;
20 flex-grow: 1;
21 border-radius: 9999px;
22 background: var(--primary-color-5);
23}
24
25.slider[data-orientation="vertical"] .slider-track {
26 width: 4px;
27 height: 100%;
28}
29
30.slider-range {
31 position: absolute;
32 height: 100%;
33 border-radius: 9999px;
34 background-color: var(--secondary-color-2);
35}
36
37.slider[data-orientation="vertical"] .slider-range {
38 width: 100%;
39}
40
41.slider-thumb {
42 all: unset;
43 position: absolute;
44 top: 50%;
45 display: block;
46 width: 16px;
47 height: 16px;
48 border: 1px solid var(--secondary-color-2);
49 border-radius: 50%;
50 background-color: var(--primary-color-1);
51 cursor: pointer;
52 transform: translate(-50%, -50%);
53 transition: border-color 150ms;
54}
55
56.slider[data-orientation="vertical"] .slider-thumb {
57 left: 50%;
58 transform: translate(-50%, 50%);
59}
60
61.slider-thumb:focus-visible[data-dragging="true"],
62.slider-thumb:focus-visible,
63.slider-thumb:hover {
64 box-shadow: 0 0 0 4px
65 color-mix(in oklab, var(--primary-color-7) 50%, transparent);
66 transition: box-shadow 150ms;
67}
68
69.slider[data-disabled="true"] {
70 cursor: not-allowed;
71 opacity: 0.5;
72}
73
74.slider[data-disabled="true"] .slider-thumb {
75 cursor: not-allowed;
76}