JSFiddle - React, Tailwind, and code Playground

HTML

<img src="https://upload.wikimedia.org/wikipedia/commons/f/fd/Pink_flower.jpg" id="Image" alt="Pineapple" width="300" height="300">

<form>
    Photo Filter:
    <input type="range" id="Filter" name="points" min="0" max="10" onchange="ChangeFilter()" />
</form>

CSS

img {-webkit-filter: grayscale(100%); filter: grayscale(100%);}

JavaScript

function ChangeFilter(event) {
    Image = document.getElementById("Image");
    Filter = document.getElementById("Filter").value;
    
    Image.style.WebkitFilter = "grayscale(" + Filter * 10 + "%)"
}