1. <style>
2. .wrap.full output:before, .wrap:not(.full) output {
3. position: absolute;
4. width: 2.5em;
5. height: 2.5em;
6. opacity: 0;
7. color: #fff;
8. pointer-events: none;
9. transition: opacity 0.5s ease-in-out;
10. }
12. * {
13. margin: 0;
14. }
16. body {
17. background: #3d3d4a;
18. }
20. .wrap {
21. margin: 2em auto;
22. width: 25em;
23. font: 2vmin trebuchet ms, arial, sans-serif;
24. }
25. @media (max-width: 500px), (max-height: 500px) {
26. .wrap {
27. font-size: 10px;
28. }
29. }
30. @media (min-width: 1600px), (min-height: 1600px) {
31. .wrap {
32. font-size: 32px;
33. }
34. }
35. .wrap:not(.full) {
36. position: relative;
37. }
38. .wrap:not(.full) output {
39. top: 0;
40. transform: translate(calc(var(--val)/100*22.5em));
41. }
42. .wrap.full {
43. position: relative;
44. height: 25em;
45. }
46. .wrap.full [type=range] {
47. display: block;
48. transform-origin: 100% 0;
49. transform: rotate(-90deg) translatey(-100%);
50. }
51. .wrap.full output {
52. width: 80%;
53. height: 80%;
54. border-radius: 50%;
55. color: #7a7a7a;
56. font-size: 4em;
57. font-weight: 700;
58. }
59. .wrap.full output:before {
60. right: 0;
61. bottom: 0;
62. transform: translatey(calc(var(--val)/-100*22.5em));
63. line-height: 2.5em;
64. text-align: center;
65. font-size: 0.25em;
66. font-weight: 200;
67. counter-reset: val var(--val);
68. content: counter(val) "%";
69. }
71. [type=range] {
72. padding: 0;
73. width: 25em;
74. height: 2.5em;
75. background: transparent;
76. font: inherit;
77. cursor: pointer;
78. }
79. [type=range], [type=range]::-webkit-slider-thumb {
80. -webkit-appearance: none;
81. }
82. [type=range]::-webkit-slider-runnable-track {
83. border: none;
84. width: 25em;
85. height: 0.5em;
86. border-radius: 0.25em;
87. background: #343440;
88. }
89. [type=range]::-moz-range-track {
90. border: none;
91. width: 25em;
92. height: 0.5em;
93. border-radius: 0.25em;
94. background: #343440;
95. }
96. [type=range]::-ms-track {
97. border: none;
98. width: 25em;
99. height: 0.5em;
100. border-radius: 0.25em;
101. background: #343440;
102. }
103. [type=range]::-webkit-slider-thumb {
104. margin-top: -1em;
105. border: none;
106. width: 2.5em;
107. height: 2.5em;
108. border-radius: 50%;
109. transform: scale(0.7);
110. background: #e6323e;
111. filter: saturate(0.7);
112. transition: transform 0.5s linear, filter 0.5s;
113. }
114. [type=range]::-moz-range-thumb {
115. border: none;
116. width: 2.5em;
117. height: 2.5em;
118. border-radius: 50%;
119. transform: scale(0.7);
120. background: #e6323e;
121. filter: saturate(0.7);
122. transition: transform 0.5s linear, filter 0.5s;
123. }
124. [type=range]::-ms-thumb {
125. margin-top: 0;
126. border: none;
127. width: 2.5em;
128. height: 2.5em;
129. border-radius: 50%;
130. transform: scale(0.7);
131. background: #e6323e;
132. filter: saturate(0.7);
133. transition: transform 0.5s linear, filter 0.5s;
134. }
135. [type=range]::-ms-tooltip {
136. display: none;
137. }
138. [type=range] + output {
139. display: flex;
140. align-items: center;
141. justify-content: center;
142. background: radial-gradient(#3d3d4a 39%, transparent 39.5%), conic-gradient(#e64c65 calc(var(--val)*1%), #41a8ab 0%);
143. }
144. [type=range] + output:after {
145. content: "%";
146. }
147. [type=range]:focus {
148. outline: none;
149. }
150. [type=range]:focus::-webkit-slider-thumb {
151. transform: none;
152. filter: none;
153. }
154. [type=range]:focus::-moz-range-thumb {
155. transform: none;
156. filter: none;
157. }
158. [type=range]:focus::-ms-thumb {
159. transform: none;
160. filter: none;
161. }
162. .wrap:not(.full) [type=range]:focus + output, .wrap.full [type=range]:focus + output:before {
163. opacity: 1;
164. }
165. </style>
166. <div class='wrap'>
167. <input id='r' type='range'/>
168. </div>
169. <script>
170. const _R = document.getElementById('r'),
171. _W = _R.parentNode,
172. _O = document.createElement('output');
174. let val = null,conic = false;
176. function update() {
177. let newval = +_R.value;
179. if (val !== newval) {
180. _W.style.setProperty('--val', _O.value = val = newval);
181. if (conic) _O.setAttribute('aria-label', `${val}%`);
182. }
183. };
185. update();
187. _O.setAttribute('for', _R.id);
188. _W.appendChild(_O);
190. if (getComputedStyle(_O).backgroundImage !== 'none') {
191. conic = true;
192. _W.classList.add('full');
193. _O.setAttribute('role', 'img');
194. _O.setAttribute('aria-label', `${val}%`);
195. }
197. addEventListener('input', update, false);
198. addEventListener('change', update, false);
199. </script>

<style>
	.wrap.full output:before, .wrap:not(.full) output {
  position: absolute;
  width: 2.5em;
  height: 2.5em;
  opacity: 0;
  color: #fff;
  pointer-events: none;
  transition: opacity 0.5s ease-in-out;
}

* {
  margin: 0;
}

body {
  background: #3d3d4a;
}

.wrap {
  margin: 2em auto;
  width: 25em;
  font: 2vmin trebuchet ms, arial, sans-serif;
}
@media (max-width: 500px), (max-height: 500px) {
  .wrap {
    font-size: 10px;
  }
}
@media (min-width: 1600px), (min-height: 1600px) {
  .wrap {
    font-size: 32px;
  }
}
.wrap:not(.full) {
  position: relative;
}
.wrap:not(.full) output {
  top: 0;
  transform: translate(calc(var(--val)/100*22.5em));
}
.wrap.full {
  position: relative;
  height: 25em;
}
.wrap.full [type=range] {
  display: block;
  transform-origin: 100% 0;
  transform: rotate(-90deg) translatey(-100%);
}
.wrap.full output {
  width: 80%;
  height: 80%;
  border-radius: 50%;
  color: #7a7a7a;
  font-size: 4em;
  font-weight: 700;
}
.wrap.full output:before {
  right: 0;
  bottom: 0;
  transform: translatey(calc(var(--val)/-100*22.5em));
  line-height: 2.5em;
  text-align: center;
  font-size: 0.25em;
  font-weight: 200;
  counter-reset: val var(--val);
  content: counter(val) "%";
}

[type=range] {
  padding: 0;
  width: 25em;
  height: 2.5em;
  background: transparent;
  font: inherit;
  cursor: pointer;
}
[type=range], [type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
}
[type=range]::-webkit-slider-runnable-track {
  border: none;
  width: 25em;
  height: 0.5em;
  border-radius: 0.25em;
  background: #343440;
}
[type=range]::-moz-range-track {
  border: none;
  width: 25em;
  height: 0.5em;
  border-radius: 0.25em;
  background: #343440;
}
[type=range]::-ms-track {
  border: none;
  width: 25em;
  height: 0.5em;
  border-radius: 0.25em;
  background: #343440;
}
[type=range]::-webkit-slider-thumb {
  margin-top: -1em;
  border: none;
  width: 2.5em;
  height: 2.5em;
  border-radius: 50%;
  transform: scale(0.7);
  background: #e6323e;
  filter: saturate(0.7);
  transition: transform 0.5s linear, filter 0.5s;
}
[type=range]::-moz-range-thumb {
  border: none;
  width: 2.5em;
  height: 2.5em;
  border-radius: 50%;
  transform: scale(0.7);
  background: #e6323e;
  filter: saturate(0.7);
  transition: transform 0.5s linear, filter 0.5s;
}
[type=range]::-ms-thumb {
  margin-top: 0;
  border: none;
  width: 2.5em;
  height: 2.5em;
  border-radius: 50%;
  transform: scale(0.7);
  background: #e6323e;
  filter: saturate(0.7);
  transition: transform 0.5s linear, filter 0.5s;
}
[type=range]::-ms-tooltip {
  display: none;
}
[type=range] + output {
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(#3d3d4a 39%, transparent 39.5%), conic-gradient(#e64c65 calc(var(--val)*1%), #41a8ab 0%);
}
[type=range] + output:after {
  content: "%";
}
[type=range]:focus {
  outline: none;
}
[type=range]:focus::-webkit-slider-thumb {
  transform: none;
  filter: none;
}
[type=range]:focus::-moz-range-thumb {
  transform: none;
  filter: none;
}
[type=range]:focus::-ms-thumb {
  transform: none;
  filter: none;
}
.wrap:not(.full) [type=range]:focus + output, .wrap.full [type=range]:focus + output:before {
  opacity: 1;
}
</style>
<div class='wrap'>
	<input id='r' type='range'/>
</div>
<script>
	const _R = document.getElementById('r'),
_W = _R.parentNode,
_O = document.createElement('output');

let val = null,conic = false;

function update() {
  let newval = +_R.value;

  if (val !== newval) {
    _W.style.setProperty('--val', _O.value = val = newval);
    if (conic) _O.setAttribute('aria-label', `${val}%`);
  }
};

update();

_O.setAttribute('for', _R.id);
_W.appendChild(_O);

if (getComputedStyle(_O).backgroundImage !== 'none') {
  conic = true;
  _W.classList.add('full');
  _O.setAttribute('role', 'img');
  _O.setAttribute('aria-label', `${val}%`);
}

addEventListener('input', update, false);
addEventListener('change', update, false);
</script>