 
 
 
-      <div class="sliderContainer"><div id="dateSlider"></div></div>
 
 
 

<input type="text" placeholder="Place Name">
<br>Try <a href="#">Albuquerque</a>


<label for="">When (slide to pick year range)</label>
 <input id="test" type="range"/>

<br><input type="button" value="click to search">
</blockquote>

          $("#dateSlider").bind("valuesChanged", function(e, data){
          	console.log(data);
          	var bd=("0" + (data.values.min.getDate())).slice(-2) ,
          		bm=("0" + (data.values.min.getMonth() + 1)).slice(-2),
          		by=data.values.min.getFullYear();
          	var ed=("0" + (data.values.max.getDate())).slice(-2) ,
          		em=("0" + (data.values.max.getMonth() + 1)).slice(-2),
          		ey=data.values.max.getFullYear();

          	$("#minDate").val(by + '-' + bm + '-' + bd );
          	$("#maxDate").val(ey + '-' + em + '-' + ed );

          	console.log('by: ' + by);
          	console.log('bm: ' + bm);
          	console.log('bd: ' + bd);
      console.log("Values just changed. min: " + data.values.min + " max: " + data.values.max);



    });


