Making an event listener for a range slider from an html form

I have been trying to get this eventlistener for my range input to work onmouseup after the client has selected the number on the slider though it won't pick it up.

window.onload = function(){ 
document.getElementById("wordInput").onkeyup = function(){
    
    sliderInt = parseInt(document.getElementById("slider").value);


    newWord = letterShifter(sliderInt, this.value.toLowerCase());
    document.getElementById("topcipher").innerText = newWord;
};

document.getElementById("slider").onmouseup = function(){
    newWord = letterShifter(document.getElementById("slider").value, document.getElementById(wordInput).toLowerCase());
    document.getElementById("topcipher").innerText = newWord;
};

The first wordInput eventlistener works (just takes a word from a text input) but the slider on mouse up one does not. What could I do to fix this please?

You didn't post a full code example, but onmouseup event perfectly works on slider.

My example on jsfiddle:

<input type="range" min="1" max="100" value="50" class="slider" id="slider">
<span id="topcipher"></span>

 window.addEventListener("load", (event) => {
   document.getElementById("slider").onmouseup = function() {
    sliderInt = parseInt(document.getElementById("slider").value);

    document.getElementById("topcipher").innerText = sliderInt;
  };  
});