JSFiddle - React, Tailwind, and code Playground

HTML

<select name="what" id="what">
<option name="raz" value="Квартиру">Квартиру</option>
<option name="raz" value="Дом">Дом</option>
<option name="raz" value="Земельный участок">Земельный участок</option>
</select>

<div id="slider-range"></div>
<input type="text" id="amount" readonly class="result" style="border:0; color:#333; font-weight:bold; float:left;">
<input type="text" id="amount1" readonly class="result" style="border:0; color:#333; font-weight:bold; float: right;">

JavaScript

$("#what").change(function ()
    {
      var min =[10, 30, 2][this.selectedIndex],
      max =[120, 200, 30][this.selectedIndex],
      valu =[[ 40, 60 ],[ 90, 130 ],[ 6, 10 ]][this.selectedIndex],
      cls =["car", "house", "money"][this.selectedIndex];
      $("#slider-range").slider("option", "max", max);
      $("#slider-range").slider("option", "min", min);
      $("#slider-range").slider("option", "values", valu);
      $("#show").removeClass().addClass(cls);
    }
  )

var plural = function (b) {
    return function (a) {
        return b[1 == a % 10 && 11 != a % 100 ? 0 : 2 <= a % 10 && 4 >= a % 10 && (10 > a % 100 || 20 <= a % 100) ? 1 : 2]
    }
};
var d = plural(['сотка','сотки','соток'])
function fn(n)
{
  var i = $("#what")[0].selectedIndex;
  return n + " " +(i == 2 ? d(n) : "м²")

}

    $( "#slider-range" ).slider({
      range: true,
      min: 10,
      max: 120,
      values: [ 40, 60 ],
      step: 2,
	  change: function(event, ui) {
        $( "#amount" ).val( fn(ui.values[ 0 ]) );
        $( "#amount1" ).val( fn(ui.values[ 1 ]));
          },
	  slide: function(event, ui) {
        $( "#amount" ).val( fn(ui.values[ 0 ]) );
        $( "#amount1" ).val( fn(ui.values[ 1 ]));
          }
	  }
	);
  $( "#amount" ).val( + $( "#slider-range" ).slider( "values", 0 ) + "м²")
  $( "#amount1" ).val( + $( "#slider-range" ).slider( "values", 1 ) + "м²")