Jquery UI

by il kamil

HTML

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<div class="container">
    <label>Default Slider</label>
    <div id="slider"></div>
</div>
    
<div class="container">
    
    <p>
  <label for="amount">Price range:</label>
  <input type="text" id="amount" name="amount">
    </p>
    <div id="slider-range"></div>
</div>
    
    <div class="container">
        <label>Equalizer</label>
        <div id="eq">
          <span>88</span>
          <span>77</span>
          <span>55</span>
          <span>33</span>
          <span>40</span>
          <span>45</span>
          <span>70</span>
        </div>
    </div>
    
  <div class="container">
      <form id="reservation">
      <label for="minbeds">Minimum number of beds</label>
      <select name="minbeds" id="minbeds">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
      </select>
    </form>
  </div>
   
   <div class="container">
       <label></label>
    </div>
    
    <div class="container">
       <label>maximum value</label>
        <p for="amount-max">Minimum number of bedrooms:</p>
        <p><input type="text" id="amount-max"></p>
        <div id="slider-range-max"></div>
    </div>
        
    <div class="container">
       <label>minimum value</label>
       <p for="amount-min">Minimum number of bedrooms:</p>
       <p><input type="text" id="amount-min"></p>
       <div id="slider-range-min"></div>
    </div>
    
    <div class="container">
       <label></label>
    </div>
    
    <div class="container">
       <label></label>
    </div>
    
    <div class="container">
       <label></label>
    </div>

CSS

.container{
    padding-top:10px;
}
.slider{background:#F2F4F8;}
.ui-slider-range { background: #47BBE4 !important; }
#eq span {
    height:120px; float:left; margin:15px
  }

JavaScript

$(function() {
    $( "#slider" ).slider();
    
    $( "#slider-range" ).slider({
      range: true,
      min: 0,
      max: 500,
      values: [ 75, 300 ],
      slide: function( event, ui ) {
        $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
      }
    });
    $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
      " - $" + $( "#slider-range" ).slider( "values", 1 ) );
    
    $( "#eq > span" ).each(function() {
      // read initial values from markup and remove that
      var value = parseInt( $( this ).text(), 10 );
      $( this ).empty().slider({
        value: value,
        range: "min",
        animate: true,
        orientation: "vertical"
      });
    });
    
    
    var select = $( "#minbeds" );
    var slider = $( "<div id='slider-bound'></div>" ).insertAfter( select ).slider({
      min: 1,
      max: 6,
      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 );
    });
    
    
    $( "#slider-range-max" ).slider({
      range: "max",
      min: 1,
      max: 10,
      value: 2,
      slide: function( event, ui ) {
        $( "#amount-max" ).val( ui.value );
      }
    });
    $( "#amount-max" ).val( $( "#slider-range-max" ).slider( "value" ) );
    
    
    $( "#slider-range-min" ).slider({
      range: "min",
      value: 37,
      min: 1,
      max: 700,
      slide: function( event, ui ) {
        $( "#amount-min" ).val( "$" + ui.value );
      }
    });
    $( "#amount-min" ).val( "$" + $( "#slider-range-min" ).slider( "value" ) );
    
    
  });