Link beetween slider and map with Leaflet

I would like to link a slider to a Leaflet map on Observable, but I am unable to do so. Here is the link to my project.

this is my code :

map18 = {
  const container = html`<div style="height: 600px;"></div>`;
  const map = L.map(container).setView([50.439255, 5.5330], 18.5);
  const googleSat = L.tileLayer('http://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}',{
    maxZoom: 20,
    subdomains:['mt0','mt1','mt2','mt3'],
    attribution: 'Google satellite'
  }).addTo(map);

  // Multiplier la vitesse de déplacement par 3
  moveVectors.forEach(vector => {
    vector.vx *= 4;
    vector.vy *= 4;
  });
  

  // Fonction pour mettre à jour les coordonnées des points
  function updatePoints() {
    for (let i = 0; i < coordonnee.length; i++) {
      const point = coordonnee[i];
      const distanceX = point.Lon_fin - point.Lon_in;
      const distanceY = point.Lat_fin - point.Lat_in;
      // Si le point est déjà à sa destination finale, passer au point suivant
      if (point.Lon_in === point.Lon_fin && point.Lat_in === point.Lat_fin) {
        continue;
      }
      // Mettre à jour les coordonnées du point dans la direction du vecteur
      if (Math.abs(distanceX) > Math.abs(moveVectors[i].vx)) {
        point.Lon_in += moveVectors[i].vx;
      }
      if (Math.abs(distanceY) > Math.abs(moveVectors[i].vy)) {
        point.Lat_in += moveVectors[i].vy;
      }
      // Si le point est arrivé à sa destination, le positionner directement à sa position finale
      if (Math.abs(distanceX) <= Math.abs(moveVectors[i].vx) && Math.abs(distanceY) <= Math.abs(moveVectors[i].vy)) {
        point.Lon_in = point.Lon_fin;
        point.Lat_in = point.Lat_fin;
      }
    }
  }

  // Mettre à jour les coordonnées des points et les afficher sur la carte jusqu'à ce qu'ils atteignent leur destination finale
  function updateAndShowPoints() {
    updatePoints();
    map.eachLayer(function(layer) {
      if (layer instanceof L.CircleMarker) {
        layer.remove();
      }
    });
    for (let i = 0; i < coordonnee.length; i++) {
      const point = coordonnee[i];
      // Récupérer la distance depuis la colonne "Dist" des données coordonnée
      const distance = point.Dist;
      // Déterminer la couleur en fonction de la distance
      const color = getColor1(distance);
      // Récupérer la taille du point en fonction de la colonne "Axe b (mm)" et la diviser par 8 pour réduire la taille
      const size = Math.max(point['Axe b (mm)'] / 8, 2); // La taille minimale du point est de 2 pixels
      L.circleMarker([point.Lat_in, point.Lon_in], { radius: size / 4, color: color }).addTo(map); // Divisez par 4 pour réduire la taille
    }
    // Vérifier si tous les points ont atteint leur destination finale
    const allPointsReachedDestination = coordonnee.every(point => point.Lon_in === point.Lon_fin && point.Lat_in === point.Lat_fin);
    // Si tous les points ont atteint leur destination, arrêter la boucle de mise à jour
    if (allPointsReachedDestination) {
      clearInterval(intervalId);
    }
  }
  // Ajouter un écouteur d'événements sur le slider pour mettre à jour les points lorsque sa valeur change
  form.option2.oninput = updateAndShowPoints;

  // Appeler la fonction de mise à jour et d'affichage des points périodiquement
  const intervalId = setInterval(updateAndShowPoints, 1000); // Mettez à jour toutes les secondes

  // Créer la légende de la taille des symboles
  const sizeLegend = createSymbolSizeLegend(2, 10); // Taille minimale : 2, Taille maximale : 10

  // Ajouter la légende à l'élément body ou à tout autre conteneur HTML de votre choix
  document.body.appendChild(sizeLegend);

  // Créer la légende continue
  const legend = createContinuousLegend(getColor1, minValue, maxValue, numIntervals);

  // Ajouter la légende à la carte
  //legend.addTo(map);

  // Ajouter une échelle à la carte
  L.control.scale().addTo(map);

  return container;
}

the error is : map18 = TypeError: Cannot create property ‘oninput’ on number ‘65’. 65 is the nimber in the slider…