@property --range-value {
    syntax: "<percentage>";
    initial-value: 0%;
    inherits: true;
}
  
@keyframes --range-observer {
    to { --range-value: 100% }
}

.range-slider i {
    color: white;
}

.range-slider input {
    -webkit-appearance: none;
    background: none;
    width: 100% !important;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
    border-radius: 50px !important;

    inline-size: 75vw;

    /* animate an @property from 0-100% */
    animation: --range-observer linear reverse;
    
    /* drive the animation to the thumb intersection with the input track */
    /* track is a timeline because overflow-x is on it, and the thumb is a child of track */
    animation-timeline: --range-thumb;
    
    /* this allows a parent to observe the timeline of a child */
    timeline-scope: --range-thumb;
}

.range-slider input::-webkit-slider-thumb {
    view-timeline: --range-thumb inline;
}

.range-slider input[type=range]::-webkit-slider-runnable-track {
    background: linear-gradient(to right in oklab, 
        oklch(52.73% 0.238 261.91),
        /* --range-value stops the gradient at the thumb position */
        oklch(72.93% 0.154 242) var(--range-value, 50%), 
        /* and finishes the gradient with a solid track fill */
        oklch(89.31% 0.016 262.75) 0
    );
    overflow: hidden;
    border-radius: 25px;
    height: auto;
    margin:5px;
}
.range-slider input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    border: 4px solid linear-gradient(95.73deg, #0459F1 0%, #36B1FF 100%);
    height: 14px;
    width: 14px;
    border-radius: 100%;
    background: #ffffff;
    cursor: pointer;
    -webkit-appearance: none;
    /* box-shadow:  0px 0px 4px 0px #36B1FF; */
}