"onchange" & "oninput" event listeners not working for my input type range, javascript html css

Issue

var slider = document.querySelector('.weather-slider')

  // EVENT LISTENERS
  slider.addEventListener('oninput',(e)=>{
    console.log(slider);
  })

    <input type="range" class="weather-slider"
     value="1" min="1" max="168" step="2">

Here's the full code on codepen

https://codepen.io/userahmad2001/pen/vYdwKmW

The desired result: I want the onchange,oninput function to trigger when the value of the range slider changes, However the function isn't working and there doesn't seem to be any problems, the console is also empty.

Solution

use change and/or input eventhandlers instead

var slider = document.querySelector('.weather-slider')

  // EVENT LISTENERS
  slider.addEventListener('change',(e)=>{
    console.log('change');
  });
  
    slider.addEventListener('input',(e)=>{
    console.log('input');
  });

<input type="range" class="weather-slider"
     value="1" min="1" max="168" step="2">

Answered By - Sigurd Mazanti