JSFiddle - React, Tailwind, and code Playground

by thetenfold

HTML

<canvas id="canvas"></canvas>
	<input type="range" id="range" min="0" max="255" value="0">

JavaScript

var slider = document.getElementById('range');
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var left = 0;
var right = 255;

function sliderChange() {
    var value = parseInt(slider.value, 10);
    var newLeft = left + value;
    var newRight = right - value;
    context.beginPath();
    context.rect(188, 50, 200, 100);
    context.fillStyle = 'rgb(' + newLeft + ', 0, ' + newRight + ')';
    context.fill();   
}
    
slider.onchange = sliderChange;

sliderChange();