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