Pretendo modificar dinámicamente, el valor de la propiedad Css animation-duration de un círculo que gira 360 grados, utilizando para ello el slider de un input range; resumiendo: que el circulo gire más o menos rápido según el valor seleccionado en el input range.

# HTML

<div class="res">
            <h2>Resultado</h2>
            <hr>
            <div id="container">
                <h3>Progreso de la Carga</h3>
                <div class="circle"></div>
                <p>Cargando...</p>
            </div> <!-- End #container -->
            <label for="veloz">Velocidad: </label>
            <input type="range" min="4" max="20" value="6" name="veloz" id="speed" onchange="masVelocidad()">
            <hr>
</div>

# CSS

.circle {
        border: 9px solid rgb(48, 47, 47);
        border-top: 9px solid rgb(187, 187, 187);
        border-radius: 50%;
        margin: auto;
        width: 100px;
        height: 100px;
        **animation: 6s** linear 0s infinite loader;
    }

# JS

let ring = document.getElementById("circle"); //Anillo que gira 360deg
let spd = document.getElementById("speed");//input range
function masVelocidad() {
    ring.style.animationDuration = spd.value + "s";
}
alert(spd.value + "s");

//También he probado
spd.addEventListener('input', () => {
  ring.style.animationDuration = spd.value + "s";
})
//He probado otras variantes, parece que no llego hasta el valor de la propiedad