¿Me podría ayudar?

Tengo un mapa que cambia cada 15 minutos con un rango deslizante. Me gustaría jugar todo el rango aquí (desde las 06:00 hasta las 12:00 con un paso de 15 minutos) cuando los usuarios hacen clic en el botón de reproducción.

 <div class="#" id="map"></div> <div id='console'> <div class='session' id='sliderbar'> <h2>Time: <label id='active-hour'>6H</label></h2> <input id='slider' class='row' type='range' min='0' max='24' step='1' value='0' /> <button type="button" class="btn btn-success" id="btnPlay" onclick="Play()">Play</button> </div> </div>

Creé la siguiente función para onclick incluso en el botón del reproductor. Pero no funciona como se esperaba.

 function Play() { var first_color = hex2rgb(document.getElementById("first").value) var second_color = hex2rgb(document.getElementById("second").value) for (let i = 0; i <25; i++) { document.getElementById('slider').addEventListener('input', (event) => { //const hour = parseInt(event.target.value) map.setPaintProperty('lines', 'fill-color', [ 'interpolate', ['linear'], ['at', i, ['get', 'speed_output']], 30, first_color, 70, second_color, ]); document.getElementById('active-hour').innerText = time[i] }); } }

La salida con el rango del control deslizante