HTML5 Canvas how to automatically keep track of text user input [closed]

Question

This is the code if you want to try it out: https://jsfiddle.net/csCoder/eLxfrn10/8/

I currently have 2 textboxes from the user will type in their input and when they press "draw line", then the input is read and a line is drawn accordingly. I want to make it so that the line will automatically be drawn whenever the user inputs anything in the textbox (without having to click on a button) OR whenever the user uses the slider. Currently the lines that I drew changed based on what is typed into the textbox. However, I have a slider that updates the text box and I want my program to keep track of the slider AND the textboxes instead of just the textboxes if that makes sense. I appreciate your help!

This is what it looks like right now: Picture

I cleaned up the code to make it easier and more relevant: This code snippet represents the slider and the textbox (user should be able to use either to input numbers).

<input id="rangeInputM" type="range" min="-10" max="10" oninput="m1.value=rangeInputM.value" />
<input id="m1" type="number" value="1" min="-200" max="200" oninput="rangeInputM.value=m1.value" />

This is where I am having trouble getting my drawing to update whenever I either input new text or move the slider. Using #m1 as the selector works for updating the text box, but I am trying to get both the textbox (#m1) and the slider (#rangeInputM) to work:

$("#rangeInputM").keyup(function(){
    
    var m1,b1 = 0;

    m1 = parseFloat($("#m1").val());
    b1 = parseFloat($("#b1").val());

   
    var myGraph = new Graph({
     canvasId: 'Graph',
     minX: -10,
     minY: -10,
     maxX: 10,
     maxY: 10,
     unitsPerTick: 1
    });      
    
    myGraph.drawLine(m1, b1, 'blue', 3);
  });

Thanks!