<div id="pl-8"  class="panel-layout" ><div id="pg-8-0"  class="panel-grid panel-has-style"  data-style="{&quot;padding&quot;:&quot;0px 0px 80px 0px&quot;,&quot;background_image_attachment&quot;:false,&quot;background_display&quot;:&quot;tile&quot;,&quot;cell_alignment&quot;:&quot;flex-start&quot;}" ><div class="panel-row-style panel-row-style-for-8-0" ><div id="pgc-8-0-0"  class="panel-grid-cell"  data-weight="1" ><div class="so-widget-apartment-list so-widget-apartment-list-default-d75171398898">  


<div class="big_query" >	
	<div class="list_left" >	
		<div class="property-slider" >	
			<div class="big-slider" >
							</div>
		</div>
	</div>
	 <div class="list_right" >
		<div class="main-search-box">
				<div class="trick"></div>
				<form   action="" method="get">
					<div class="search-top">
						<div class="search-input">
							<input id="search-input"  name="search_by" type="text" placeholder="Address e.g. steet or city" />							 
						</div>						
					</div>
					<div class="search-bottom">
						<div class="calc_range">
							<div class="custom-select">
								<div class="select-placeholder">Any type</div>
								<div class="select-hover">
								<div class="select-item item-type" value="any-type">Any type</div><div class="select-item item-type" value="apartments">Apartments</div><div class="select-item item-type" value="commercial">Commercial</div><div class="select-item item-type" value="garages">Garages</div><div class="select-item item-type" value="houses">Houses</div>									 
									
									 
								</div>
							</div>
						</div>
						<div class="calc_range">							
							<div class="custom-select">
								<div class="select-placeholder">Beds</div>
								<div class="select-hover">
									<div class="select-item opac-price item-min" value="all">Beds</div>									 
										<div class="select-item item-min" value="1">1</div>
										<div class="select-item item-min" value="2">2</div>
										<div class="select-item item-min" value="3">3</div>
										<div class="select-item item-min" value="4">4</div>
										<div class="select-item item-min" value="5">5</div>
										<div class="select-item item-min" value="6">6</div>
										<div class="select-item item-min" value="7">7</div>
										<div class="select-item item-min" value="8">8</div>
										<div class="select-item item-min" value="9">9</div>
										<div class="select-item item-min" value="10">10</div>
									 
								</div>
							</div>
						</div>
						<div class="calc_range">
							<div class="custom-select">
								<div class="select-placeholder">Baths</div>
								<div class="select-hover">
									<div class="select-item opac-price item-max" value="all">Baths</div>
										<div class="select-item item-max" value="1">1</div>
										<div class="select-item item-max" value="2">2</div>
										<div class="select-item item-max" value="3">3</div>
										<div class="select-item item-max" value="4">4</div>
										<div class="select-item item-max" value="5">5</div>
										<div class="select-item item-max" value="6">6</div>
										<div class="select-item item-max" value="7">7</div>
										<div class="select-item item-max" value="8">8</div>
										<div class="select-item item-max" value="9">9</div>
										<div class="select-item item-max" value="10">10</div>
								</div>
							</div>
						</div>
					</div>
					
					<div class="calc_range">
					  <div class="range_title">Area range (sq ft)</div>					   
					  <div id="slider-range"></div>
						<input name="area_min" id="area_min" class="range_val" type="text" readonly>
						<input name="area_max" id="area_max"  class="range_val c2" type="text" readonly>
					 </div>
					 
					<div class="calc_range">
					  <div class="range_title">Price range ($)</div>					   
					  <div id="price-range"></div>
						<input name="min-price" id="min-price" class="range_val" type="text" readonly>
						<input name="max-price" id="max-price"  class="range_val c2" type="text" readonly>
					 </div>
					 <div class="calc_range">
						<div class="more-search-options-trigger">Additional Features</div>
						<div class="checkboxes">
							<input id="air-conditioning" name="air-conditioning" type="checkbox">
							<label for="air-conditioning">Air Conditioning</label>		

							<input id="alarm" name="alarm" type="checkbox">
							<label for="alarm">Alarm</label>
		
							<input id="central-heating" name="central-heating" type="checkbox">
							<label for="central-heating">Central Heating</label>
							
							<input id="gym" name="gym" type="checkbox">
							<label for="gym">Gym</label>
							
							<input id="internet" name="internet" type="checkbox">
							<label for="internet">Internet</label>
							
							<input id="laundry-room" name="laundry-room" type="checkbox">
							<label for="laundry-room">Laundry Room</label>
							
							<input id="swimming-pool" name="swimming-pool" type="checkbox">
							<label for="swimming-pool">Swimming Pool</label>
							
							<input id="window-covering" name="window-covering" type="checkbox">
							<label for="window-covering">Window Covering</label>
						</div>
					</div>
					</div>
					<div class="search-btn">
						<button class="form-btn">Search</button>
					</div>
					
					
					<input id="any-type" name="type" value="any-type" type="hidden">
					<input id="baths" name="baths" value="all" type="hidden">
					<input id="beds" name="beds" value="all" type="hidden">
					 
					
				</form>
		</div>
	</div>			
</div>

 <script>

  $( function() {
    $( "#slider-range" ).slider({
      range: true,
      min: 330, 
      max: 950,
      values: [  330, 950 ],
      slide: function( event, ui ) {
        $( "#area_min" ).val(  ui.values[ 0 ]  );
        $( "#area_max" ).val(  ui.values[ 1 ] );
      }
    });
	 $( "#area_min" ).val( $( "#slider-range" ).slider( "values", 0 ) );
     $( "#area_max" ).val( $( "#slider-range" ).slider( "values", 1 ) );
   
  } );
  
   $( function() {
    $( "#price-range" ).slider({
      range: true,
      min: 10000, 
      max: 150000,
      values: [  10000, 150000 ],
      slide: function( event, ui ) {
        $( "#min-price" ).val(  ui.values[ 0 ]  );
        $( "#max-price" ).val(  ui.values[ 1 ] );
      }
    });
	 $( "#min-price" ).val( $( "#price-range" ).slider( "values", 0 ) );
     $( "#max-price" ).val( $( "#price-range" ).slider( "values", 1 ) );
   
  } );
 </script>
  
<script type="text/javascript">	
	$( document ).ready(function() {$('.small-slider').slick({  slidesToShow: 1,  slidesToScroll: 1,  arrows: true, dots: false});});
</script>
<script type="text/javascript">	
		$( document ).ready(function() {
			$( ".select-placeholder" ).click(function() {
			   $( this ).next(".select-hover").fadeIn(500);
			   $( this ).parent(".custom-select").addClass("click");
			});
			$( ".item-type" ).click(function() {
			   $val = $(this).attr("value");
			   $html = $(this).html();
			   $(this).parent(".select-hover").parent(".custom-select").children(".select-placeholder").html($html);
			   $("#any-type").val($val);
			   $(".select-hover").fadeOut(500);
			   $(this).parent(".select-hover").parent(".custom-select").removeClass("click");
			});
			
			$( ".item-min" ).click(function() {
			   $val = $(this).attr("value");
			   $html = $(this).html();
			   $(this).parent(".select-hover").parent(".custom-select").children(".select-placeholder").html($html);
			   $("#beds").val($val);
			   $(".select-hover").fadeOut(500);
			   $(this).parent(".select-hover").parent(".custom-select").removeClass("click");
			});
			
			$( ".item-max" ).click(function() {
			   $val = $(this).attr("value");
			   $html = $(this).html();
			   $(this).parent(".select-hover").parent(".custom-select").children(".select-placeholder").html($html);
			   $("#baths").val($val);
			   $(".select-hover").fadeOut(500);
			    $(this).parent(".select-hover").parent(".custom-select").removeClass("click");
			});
			
			$(document).mouseup(function(e)	{	
				var container = $(".custom-select.click");
				// if the target of the click isn't the container nor a descendant of the container
				if (!container.is(e.target) && container.has(e.target).length === 0) 
				{$(".select-hover").fadeOut(500);$(".custom-select").removeClass("click");}
			});
			$( ".more-search-options-trigger" ).click(function() {
			   if($(this).hasClass("active")){
				   $(this).removeClass("active");
			   }else{
				    $(this).addClass("active");
			   }
			   $(this).next(".checkboxes").slideToggle( "slow" );
			});
			
			
		});
		
		 
</script>

<script type="text/javascript">
  function initAutocomplete() {
    // Create the autocomplete object, restricting the search to geographical
    // location types.
    autocomplete = new google.maps.places.Autocomplete(
        /** @type {!HTMLInputElement} */(document.getElementById('search-input')),
        {types: ['geocode']});

    // When the user selects an address from the dropdown, populate the address
    // fields in the form.
    autocomplete.addListener('place_changed', fillInAddress);
  }

  function fillInAddress() {
    // Get the place details from the autocomplete object.
    var place = autocomplete.getPlace();
		
  }
 
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD5oz9HbGvwfGspb_8OoRX4pc-miQNiu3c&libraries=places&callback=initAutocomplete"      async defer></script></div></div></div></div></div>