JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas"></canvas>
<div id="preview">

<p>London is the capital city of England.
It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>

</div> 
<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');

function sliderChange() {
    var value = parseInt(slider.value, 10);
    context.beginPath();
    context.rect(188, 50, 200, 100);
    context.fillStyle = 'hsl(' + value + ', 50, 50)';
    context.fill();   
}
    
slider.onchange = sliderChange;

sliderChange(); // run our function once to start