-
Notifications
You must be signed in to change notification settings - Fork 0
/
range.css
97 lines (97 loc) · 4.58 KB
/
range.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
/**
* @see https://codepen.io/thebabydino/pen/zxPZqe
*/
input[type='range'] {
box-sizing: border-box;
overflow: visible;
-webkit-appearance: none;
padding: 0;
background: transparent;
/* Chrome */
/* Firefox & Chrome/ Opera need this,
otherwise font-size is smaller */
font-size: 1em;
cursor: pointer;
/* wish I could style this asshole */
}
input[type='range']::-webkit-slider-runnable-track {
-webkit-appearance: none;
border: none;
/* because IE */
width: 17.5em;
height: 1em;
border-radius: .5em;
box-shadow: 0 1px 1px #616266, inset 0 0.125em 0.125em #111, inset 0 0 0 0.325em #323033, inset 0 0.125em 0.125em 0.325em #111, inset 0 -1px 1px 0.325em rgba(238, 238, 238, 0.32);
background: linear-gradient(90deg, #1c206a, #5fa0be);
}
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none;
margin-top: -.25em;
/* weird shit, Chrome */
border: none;
width: 1.5em;
height: 1.5em;
border-radius: 50%;
transform: rotate(5deg);
box-shadow: inset 0 1px #fefefe, 0 1px .125em #232426, 0 .125em .25em #232426;
background: radial-gradient(#61c0f6, #61c0f6 50%, #35729e 53%, #35729e 65%, rgba(53, 114, 158, 0) 71%) 50% 50%, linear-gradient(-45deg, #5f5f5f, rgba(95, 95, 95, 0) 65%) 100% 0, linear-gradient(45deg, #5f5f5f, rgba(95, 95, 95, 0) 65%), linear-gradient(-135deg, #5f5f5f, rgba(95, 95, 95, 0) 65%) 100% 100%, linear-gradient(135deg, #5f5f5f, rgba(95, 95, 95, 0) 65%) 0 100%, linear-gradient(-45deg, rgba(95, 95, 95, 0) 65%, #5f5f5f) 100% 0, linear-gradient(45deg, rgba(95, 95, 95, 0) 65%, #5f5f5f), linear-gradient(-135deg, rgba(95, 95, 95, 0) 65%, #5f5f5f) 100% 100%, linear-gradient(135deg, rgba(95, 95, 95, 0) 65%, #5f5f5f) 0 100% #ddd;
background-repeat: no-repeat;
background-size: 50% 50%;
background-size: 56% 56%;
/* fix Chrome/ Opera */
}
input[type='range']::-moz-range-track {
z-index: -1;
/* fix Firefox WTF */
border: none;
/* because IE */
width: 10em;
height: 1em;
border-radius: .5em;
box-shadow: 0 1px 1px #616266, inset 0 0.125em 0.125em #111, inset 0 0 0 0.325em #323033, inset 0 0.125em 0.125em 0.325em #111, inset 0 -1px 1px 0.325em rgba(238, 238, 238, 0.32);
background: linear-gradient(90deg, #1c206a, #5fa0be);
}
input[type='range']::-moz-range-thumb {
border: none;
width: 1.5em;
height: 1.5em;
border-radius: 50%;
transform: rotate(5deg);
box-shadow: inset 0 1px #fefefe, 0 1px .125em #232426, 0 .125em .25em #232426;
background: radial-gradient(#61c0f6, #61c0f6 50%, #35729e 53%, #35729e 65%, rgba(53, 114, 158, 0) 71%) 50% 50%, linear-gradient(-45deg, #5f5f5f, rgba(95, 95, 95, 0) 65%) 100% 0, linear-gradient(45deg, #5f5f5f, rgba(95, 95, 95, 0) 65%), linear-gradient(-135deg, #5f5f5f, rgba(95, 95, 95, 0) 65%) 100% 100%, linear-gradient(135deg, #5f5f5f, rgba(95, 95, 95, 0) 65%) 0 100%, linear-gradient(-45deg, rgba(95, 95, 95, 0) 65%, #5f5f5f) 100% 0, linear-gradient(45deg, rgba(95, 95, 95, 0) 65%, #5f5f5f), linear-gradient(-135deg, rgba(95, 95, 95, 0) 65%, #5f5f5f) 100% 100%, linear-gradient(135deg, rgba(95, 95, 95, 0) 65%, #5f5f5f) 0 100% #ddd;
background-repeat: no-repeat;
background-size: 50% 50%;
/* Firefox-only, it won't work in IE
and it's messed up in Chrome */
cursor: ew-resize;
}
input[type='range']::-ms-track {
border: none;
/* because IE */
width: 10em;
height: 1em;
border-radius: .5em;
box-shadow: 0 1px 1px #616266, inset 0 0.125em 0.125em #111, inset 0 0 0 0.325em #323033, inset 0 0.125em 0.125em 0.325em #111, inset 0 -1px 1px 0.325em rgba(238, 238, 238, 0.32);
background: linear-gradient(90deg, #1c206a, #5fa0be);
color: transparent;
}
input[type='range']::-ms-thumb {
border: none;
width: 1.5em;
height: 1.5em;
border-radius: 50%;
transform: rotate(5deg);
box-shadow: inset 0 1px #fefefe, 0 1px .125em #232426, 0 .125em .25em #232426;
background: radial-gradient(#61c0f6, #61c0f6 50%, #35729e 53%, #35729e 65%, rgba(53, 114, 158, 0) 71%) 50% 50%, linear-gradient(-45deg, #5f5f5f, rgba(95, 95, 95, 0) 65%) 100% 0, linear-gradient(45deg, #5f5f5f, rgba(95, 95, 95, 0) 65%), linear-gradient(-135deg, #5f5f5f, rgba(95, 95, 95, 0) 65%) 100% 100%, linear-gradient(135deg, #5f5f5f, rgba(95, 95, 95, 0) 65%) 0 100%, linear-gradient(-45deg, rgba(95, 95, 95, 0) 65%, #5f5f5f) 100% 0, linear-gradient(45deg, rgba(95, 95, 95, 0) 65%, #5f5f5f), linear-gradient(-135deg, rgba(95, 95, 95, 0) 65%, #5f5f5f) 100% 100%, linear-gradient(135deg, rgba(95, 95, 95, 0) 65%, #5f5f5f) 0 100% #ddd;
background-repeat: no-repeat;
background-size: 50% 50%;
}
input[type='range']::-ms-fill-lower, input[type='range']::-ms-fill-upper {
background: transparent;
}
input[type='range']::-ms-tooltip {
display: none;
}
input[type='range']:focus {
outline: none;
}