JSFiddle - React, Tailwind, and code Playground

HTML

<p id="info"></p>
<button id="sub">-</button><meter value="25" min="0" max="50">6 out of 10</meter><button id="add">+</button>
<img src="https://avatars3.githubusercontent.com/u/4585039?v=3&s=460" />

CSS

meter
		{
			height: 20px;
			width: 200px;
		}
		button{
			padding-top: 6px;
		}
		img{
			display: block;
			width: 250px;
 			-webkit-filter: brightness(0.50);
 		}

JavaScript

$(document).ready(function(){
		$("#info").html("The current brightness is = "+parseInt($("meter").attr('value')));
		$("#sub").click(function(){
			var meter = $("meter");
			if(meter.attr('value')<=50 && meter.attr('value')> 0 ){
				meter.attr('value',parseInt(meter.attr('value')) -1);
				$("#info").html("The current brightness is = "+parseInt(meter.attr('value')));
				var s = $("img").css('-webkit-filter');
				var toUpdate = parseFloat(s.substring(s.indexOf('(')+1,s.indexOf(')')))-0.02;
				$("img").css('-webkit-filter','brightness('+toUpdate+')');
			}
		});

		$("#add").click(function(){
			var meter = $("meter");
			if(meter.attr('value')<50 && meter.attr('value')>= 0 ){
				meter.attr('value',parseInt(meter.attr('value')) +1);
				$("#info").html("The current brightness is = "+parseInt(meter.attr('value')));
				var s = $("img").css('-webkit-filter');
				var toUpdate = parseFloat(s.substring(s.indexOf('(')+1,s.indexOf(')')))+0.02;
				$("img").css('-webkit-filter','brightness('+toUpdate+')');
			}
		});
	});