I have anonymous functions that I am trying to convert into arrow function. The code works fine with the anonymous functions, the text of the tag changes to update to the value of the slider and my functions setupGrid and clearGrid are called. However when I try to change it to arrow functions, the value of the tag shows undefined, and the setupGrid and clearGrid functions are not called.

Below is the code for the anonymous function implementation:

// input slider
var slider = document.getElementById("slide-input");
// span tag
var output = document.getElementById("slide-size");
output.innerHTML = slider.value;

slider.oninput = function() {
    console.log(this)
    output.innerHTML = this.value;
};
slider.onchange = function() {
    clearGrid();
    setupGrid(this.value);
};

Below is the code for the faulty arrow function implementation:

slider.oninput = () => {
    console.log(this)
    output.innerHTML = this.value;
};
slider.onchange = () => {
    clearGrid();
    setupGrid(this.value);
};

Can anyone explain how to properly use arrow functions in this case?