Could you please help me?

I have a map that change every 15 minutes with a slider range. I would like to play all range here (from 06:00 to 12:00 with a step of 15 mn) when users click on the play button.

    <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>

I creat the below function for the onclick even in the player button. But it doesn't work as expected.

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]
      });
    }
}

The output with the slider range