JSFiddle - React, Tailwind, and code Playground

HTML

<section id="content1">							
  <div class="slider">
    <div class="slider-banner">Мин. сумма</div>
    <div class="left-nomer">10 000 руб.</div>
    <div class="right-nomer">руб.</div>
    <div class="right-nomer right-nomer-value" id="contentSlider1">1 000 000</div>
    <div class="clr"></div>
    <div id="slider1" class="slider1"></div>
  </div>
  <div class="slider">
    <div class="slider-banner">Срок сдачи	</div>
    <div class="left-nomer">1 день</div>
    <div class="right-nomer">дней</div>
    <div class="right-nomer right-nomer-value" id="contentSlider2">60</div>
    <div class="clr"></div>
    <div id="slider2" class="slider1"></div>
    <div class="clr"></div>
  </div>
</section>  
<div class="empty">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA !!!!!!!!!!!!!!!!!</div>

<div class="spisok">
  <div class="komnata">
    <div class="title">2х комнатная квартира</div>
    <div class="cena">10000 руб. </div>
    <div class="clr"></div>
    <div class="dni">30 дней </div>
  </div>
  <div class="komnata">
    <div class="title">3х комнатная квартира</div>
    <div class="cena">20000 руб. </div>
    <div class="clr"></div>
    <div class="dni">15 дней</span></div>
  </div>
  <div class="komnata">
    <div class="title">4х комнатная квартира</div>
    <div class="cena">33000 руб. </div>
    <div class="clr"></div>
    <div class="dni">21 дней </div>
  </div>
</div>

CSS

.clr {
  clear: both
}
.left-nomer {
  float: left;
  margin: 10px 0 15px 0px; 
  color: #313b40; 
  font-size: 20px; 
  font-weight: 600;
}
.right-nomer {
  float: right; 
  margin: 10px 0px 15px 10px; 
  color: #313b40; 
  font-size: 20px; 
  font-weight: 600;
}
.slider-banner { 
  color: #adadad; 
  font-size: 13px; 
  float: left; 
  width: 100%; 
  margin-top: 30px;
}
.br-banner {
  width: 100%; 
  float: left; 
  margin: 40px 0 30px 0;
}
#content1 {
  background:#e1e1e1;
  padding: 20px;
}

#content1 .slider1, #content2 .slider1 {
  height:1px;
  background:#d5d3d3;
  position:relative;
  margin:0 auto;
  padding:0 10px;
  border: 0;
}
#content1 .ui-slider, #content2 .ui-slider { 
  margin:0; 
  padding: 0; 
}
#content1 .ui-slider-horizontal, #content2 .ui-slider-horizontal {     margin:0; 
  padding: 0;
}
#content1 .ui-widget, #content2 .ui-widget { 
  margin:0; 
  padding: 25px;
}
#content1 .ui-widget-content, #content2 .ui-widget-content { 
  margin:0; 
  padding: 0;
}
#content1 .ui-corner-all, #content2 .ui-corner-all { 
  margin:0; 
  padding: 0; 
  border-radius: 4px;
}
#content1 .ui-state-default, #content2 .ui-state-default {
  box-shadow:0;
}
#content1 .ui-slider-handle, #content2 .ui-slider-handle {
  width:13px;
  height:13px;
  position:absolute;
  background: #fff; 
  border: 3px solid #0387eb; 
  margin-top: -5px;
  margin-left:-12px;
  border-radius: 50%;
  z-index:1;
}
#content1 .ui-widget-header, #content2 .ui-widget-header {
  background: #0387eb;  
  height:4px;
  left:1px;
  top:1px;
}

.spisok {
  padding: 20px;
}
.komnata {
  background: #0387eb;
  padding: 20px;
  margin-bottom: 20px;
}

JavaScript

$("#slider2").slider({
  range: "min",
  value: 14,//Значение, которое будет выставлено слайдеру при загрузке
  min: 1,//Минимально возможное значение на ползунке
  max: 60,//Максимально возможное значение на ползунке
  step: 1,//Шаг, с которым будет двигаться ползунок
  slide: onSlide,
  stop : function() {
   $('.komnata').fadeTo(0,1)
}

});

$("#slider1").slider({
  range: "min",
  value: 10000,//Значение, которое будет выставлено слайдеру при загрузке
  min: 10000,//Минимально возможное значение на ползунке
  max: 100000,//Максимально возможное значение на ползунке
  step: 1000,//Шаг, с которым будет двигаться ползунок
  slide: onSlide,
  stop : function() {
   $('.komnata').fadeTo(0,1)
}

});

function onSlide(e, ui) {$('.komnata').fadeTo(0, 0.5);
  $(this).closest('.slider').find('.right-nomer-value').html(ui.value);
  setTimeout(showItems);
}

function showItems() {
  const
    price = $('#slider1').slider('value'),
    days = $('#slider2').slider('value');

  $('.komnata').each(function() {
    const $this = $(this);

    $this.toggle(
      price <= parseInt($this.find('.cena').text().replace(/\D/g, '')) &&
      days <= parseInt($this.find('.dni').text().replace(/\D/g, ''))
    );
  });

  $('.empty').toggle(!$('.komnata:visible').length);
}

showItems();