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);
    }
  )

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