JSFiddle - React, Tailwind, and code Playground
HTML
<img class="image" id="image" name="image" src="https://www.w3schools.com/cssref/pineapple.jpg" alt="">
<br>
<input class="contraste" type="range" min=0 max=200 />
<br>
<input id="brillo" name="brillo" type="range" min=0 max=200 />
CSS
.image{
filter: contrast(10%);
}
JavaScript
var image = document.querySelector('.image');
var range = document.querySelector('.contraste');
range.addEventListener('change', function(e){
image.style.filter = "contrast(" + e.target.value + "%" +")";
});
$('#brillo').on('input', function() {
image.style.filter = brightness(50%);
});