Setting the initial value of an input type range element

Question

I'm working on a web application for children with handicap. Using the SpeechSynthesisUtterance interface I created a vocal synthesis system, to provide users with instructions about the functioning of the application. I want to regulate the reading speed, using the rate property of SpeechSynthesisUtterance. The speed is controlled by a slider (input type "range"). I set an initial value of the slider (0.1), but when I open the web page of the application, and I start the vocal synthesis, the reading speed doesn't correspond to that value.

I already searched a lot of material about this subject, but I still don't find a solution.

Anyone has any suggestions? Thanks a lot in advance.

Here is my code:

<input type="range" class="slider" id="vocal_speed" min="0.1" max="1.5" value="0.1" step="0.01"> 

var vocalSpeed = document.getElementById("vocal_speed");

vocalSpeed.addEventListener('input', function() {
  utterance.rate = event.target.value;
}, false);```