JSFiddle - React, Tailwind, and code Playground

HTML

<label>Range :</label> <input type="range" name="points" value="0" min="0" step="1" max="100" id="range"> 
<canvas id="myCanvas" width="578" height="250"></canvas>

JavaScript

//Works in chrome & safari

	  draw(100);
      $('#range').on('change', function(){
      	range = parseInt($(this).val());
      	draw(100-range)
      })
      
      function draw(val){
		
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d'),
            x = 100,
            y = 100,
            cp1x = x/2,
            cp2x = y/2,
            cp1y = val,
            cp2y = val;
		context.clearRect(0, 0, canvas.width, canvas.height);
          
        context.beginPath();
        context.lineWidth = 1;

        context.moveTo(25 , x);
        context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);

        // line color
        context.strokeStyle = 'black';
        context.stroke();

      }