JSFiddle - React, Tailwind, and code Playground

HTML

<div class="catalog__range fl">
    <h3>укажите диапазон цены:</h3>
    <p>от</p>
    <input name="minimum-price" type="text" class="numberinput" />
    <p>до</p>
    <input name="maximum-price" type="text" class="numberinput" />
    <p>рублей в сутки</p>
</div>

<div class="catalog__flats">
		<div class="flat" data-region="center" data-price="1000">
			<h4>Центр 1</h4>
            <p>1000 рублей/сутки</p>
		</div>
		<div class="flat" data-region="center" data-price="2000">
			<h4>Центр 2</h4>
			<p>2000 рублей/сутки</p>
		</div> 
		<div class="flat" data-region="jdvokzal" data-price="3000">
			<h4>Жд вокзал 1</h4>
			<p>3000 рублей/сутки</p>
		</div>
		<div class="flat" data-region="jdvokzal" data-price="4000">
			<h4>Жд вокзал 2</h4>
			<p>4000 рублей/сутки</p>
		</div>
</div>

CSS

.catalog__range {
	font-size: 0;
	width: 446px;
}

.catalog__range p,
.catalog__range input {
	display: inline-block;
	vertical-align: top;
}

.catalog__range p {
	font-size: 14px;
	color: #000;
	text-transform: uppercase;
	line-height: 45px;
}

.catalog__range input {
	width: 107px;
	height: 45px;
	line-height: 45px;
	border-width: 0;
	margin: 0 14px;
	background-color: #eee;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	font-size: 18px;
	text-align: center;
}

.flat {
	display: inline-block;
	vertical-align: top;
	width: 100px; height: 100px;
	margin: 0 6px 21px;
	font-size: 14px;
	text-align: left;
	background-color: #eee;
}

.flat-display-none {display: none;}

JavaScript

$(".numberinput").keyup(function () {
	range();
});

function range() {
	var flatsArray = [],
		flat = $('.flat'),
		minPrice = $('input[name=minimum-price]').val();
		console.log(minPrice);
		maxPrice = $('input[name=maximum-price]').val();
		console.log(maxPrice);

	flat.each(function() {
		var obj = {};
		obj.selector = $(this);
		obj.region = $(this).attr("data-region");
		obj.price = $(this).attr("data-price");
		flatsArray.push(obj);
	});

	for (var i = 0; i < flatsArray.length; i += 1) {
		var flatItem = flatsArray[i];
		console.log(flatItem.price);
		if (flatItem.price >= minPrice && flatItem.price <= maxPrice) {
			flatItem.selector.removeClass('flat-display-none');
		}
		else {
			flatItem.selector.addClass('flat-display-none');
		}
	}
};