ASCII text
1
input[type="range"] {
2
appearance: none;
3
cursor: pointer; /* a11y */
4
height: var(--height-range);
5
position: relative;
6
}
7
label:has(input[type="range"]) {
9
display: inline-flex; /* So they are aligned */
10
gap: var(--gap-label-checkbox);
11
align-items: center;
12
cursor: default; /* a11y */
13
}
14
::-webkit-slider-runnable-track {
16
background: var(--color-range);
17
height: var(--height-range);
18
box-shadow: var(--shadow-range);
19
border: var(--border-range);
20
border-radius: var(--radius-range);
21
outline: none;
22
}
23
::-webkit-slider-runnable-track:hover {
25
background: var(--color-range-hover);
26
box-shadow: var(--shadow-range-hover);
27
border: var(--border-range-hover);
28
}
29
::-webkit-slider-thumb {
31
appearance: none;
32
background: var(--color-range-text);
33
height: var(--height-range-thumb);
34
width: var(--width-range-thumb);
35
box-shadow: var(--shadow-range-thumb);
36
border: var(--border-range-thumb);
37
border-radius: var(--radius-range-thumb);
38
transform: translateY(var(--position-range-thumb));
39
}
40
::-webkit-slider-thumb:hover {
42
background: var(--color-range-hover-text);
43
box-shadow: var(--shadow-range-thumb-hover);
44
border: var(--border-range-thumb-hover);
45
transform: translateY(var(--position-range-thumb-hover));
46
height: var(--height-range-thumb-hover);
47
width: var(--width-range-thumb-hover);
48
}
49
::-moz-range-track {
51
background: var(--color-range);
52
height: var(--height-range);
53
box-shadow: var(--shadow-range);
54
border: var(--border-range);
55
border-radius: var(--radius-range);
56
outline: none;
57
}
58
::-moz-range-track:hover {
60
background: var(--color-range-hover);
61
box-shadow: var(--shadow-range-hover);
62
border: var(--border-range-hover);
63
}
64
::-moz-range-thumb {
66
appearance: none;
67
background: var(--color-range-text);
68
height: var(--height-range-thumb);
69
width: var(--width-range-thumb);
70
box-shadow: var(--shadow-range-thumb);
71
border: var(--border-range-thumb);
72
border-radius: var(--radius-range-thumb);
73
/*transform: translateY(calc(var(--position-range-thumb) + 12.5%));*/
74
}
75
::-moz-range-thumb:hover {
77
background: var(--color-range-hover-text);
78
box-shadow: var(--shadow-range-thumb-hover);
79
border: var(--border-range-thumb-hover);
80
/*transform: translateY(calc(var(--position-range-thumb-hover) + 12.5%));*/
81
height: var(--height-range-thumb-hover);
82
width: var(--width-range-thumb-hover);
83
}
84