JSFiddle - React, Tailwind, and code Playground

HTML

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

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

CSS

.checks{font-size: 25px;font-family:  comic sans ms;font-weight:  bold;}

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('change',()=> {
		min.value = ''; max.value = ''; let array = [];
		[...checks].forEach(e => {
			if(e.checked){
				array.push(+e.value.split('-')[0]);
				array.push(+e.value.split('-')[1]);
			}
		});
		min.value = Math.min(...array), max.value = Math.max(...array);
	},false);
});