1@property --slider-complete {
2  initial-value: 0;
3  syntax: "<number>";
4  inherits: true;
5}
6
7@keyframes sync { to { --slider-complete: 1; }}
8
9.slider {
10  timeline-scope: --thumb;
11  animation: sync both linear reverse;
12  animation-timeline: --thumb;
13  animation-range: contain;
14}
15
16.slider [type="range"]::-webkit-slider-thumb {
17  view-timeline: --thumb inline;
18}
19/* Wrapper elements */
20.slider__track {
21  transform-origin: 0 50%;
22  scale: var(--slider-complete) 1;
23}