JSFiddle - React, Tailwind, and code Playground

HTML

<div class="checks">
	<input type="checkbox" value="20-23">
	<input type="checkbox" value="24-30">
	<input type="checkbox" value="31-35">

	<input type="text" class="min" value="20">
	<input type="text" class="max" value="35">
</div>

CSS

input[type="checkbox"]{
	width:  50px;
	height: 50px;
}

JavaScript

let checks = document.querySelectorAll('input[type="checkbox"]');
let min = document.querySelectorAll('.min')[0];
let max = document.querySelectorAll('.max')[0];

[...checks].forEach(e => {
	e.addEventListener('click',()=> {
		min.value = ''; max.value = '';
		[...checks].forEach(e => {
			if(e.checked){
				min.value = e.value.split('-')[0];
				max.value = e.value.split('-')[1];
			}
		});
	},false);
});