JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

<select id="minbeds" name="spalaniemiasto" class="form-text" style="padding-right:0;"> <option value="1">1</option>
                                   
                   
                                   
                                <option value="2">2</option>
                                   
                 
                                   
                                <option value="3">3</option>
                                   
               
                                   
                                <option value="4">4</option>
                                   
                      
                                   
                                <option value="5">5</option>
                                   
                                
                                   
                                <option value="6">6</option>
                                   
                            
                                   
                                <option value="7">7</option>
                                   
                       
                                   
                                <option value="8">8</option>
                                   
                                
                                   
                                <option value="9">9</option>
                                   
                               
                                   
                                <option value="10">10</option>
</select><div id="slider">
</div>
<select id="minbeds1" name="spalaniemiasto" class="form-text" style="padding-right:0;"> <option value="1">1</option>
                                   
                                <option value="1.5">1.5</option>
                                   
                 ...

JavaScript

$(function() {
    var select = $('#minbeds');
    var slider = $( "<div id='slider'></div>" ).insertAfter( select ).slider({
      min: 1,
      max: 10,
      range: "min",
      value: select[0].selectedIndex + 1,
      slide: function( event, ui ) {
        select[0].selectedIndex = ui.value - 1;
      }
    });
    $( "#minbeds" ).change(function() {
      slider.slider( "value", this.selectedIndex + 1 );
    });
  });

$(function() {
    var select = $("#minbeds1");
    var slider = $( "<div id='slider'></div>" ).insertAfter( select ).slider({
      min: 1,
      max: 20,
      range: "min",
      value: select[0].selectedIndex + 1,
      slide: function( event, ui ) {
        select[0].selectedIndex = ui.value - 1;
      }
    });
    $( "#minbeds1" ).change(function() {
      slider.slider( "value", this.selectedIndex + 1 );
    });
  });

$(function() {
    var select = $( "#minbeds2" );
    var slider = $( "<div id='slider'></div>" ).insertAfter( select ).slider({
      min: 1,
      max: 20,
      range: "min",
      value: select[0].selectedIndex + 1,
      slide: function( event, ui ) {
        select[0].selectedIndex = ui.value - 1;
      }
    });
    $( "#minbeds2" ).change(function() {
      slider.slider( "value", this.selectedIndex + 1 );
    });
  });

$(function() {
    var select = $( "#minbeds3" );
     var slider = $( "<div id='slider'></div>" ).insertAfter( select ).slider({
      min: 1,
      max: 20,
      range: "min",
      value: select[0].selectedIndex + 1,
      slide: function( event, ui ) {
        select[0].selectedIndex = ui.value - 1;
      }
    });
    $( "#minbeds3" ).change(function() {
      slider.slider( "value", this.selectedIndex + 1 );
    });
  });