jQuery: Effect on change with Amount-Slider

Question

I have a form set up to which i had a list of items values change when certain values are selected.

I have a form with the values of 1 to 4 Years and when these options are selected the values in the result field change with adapted prices. Its all working fine when I use this menu.

Now i've installed a slider ( http://jqueryui.com/slider/#hotelrooms ) and got it working with the menu but the the .change of jQuery doesnt pick up the changes made to the by the slider.

As you can see in this bit of script:

<script>
  $(function() {
    var select = $( "#minbeds" );
    var slider = $( "<div id='slider' style='margin-left:30px;'></div>" ).insertAfter( "#reserverer" ).slider({
     min: 1,
     max: 4,
     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 );
    });
  });
 </script>

The bit where it says: selectedIndex + 1, changes the menu but this doesnt activate the following jQuery code:

<script>
$('#minbeds').change(function(){
    if($(#minbeds).val() == '2 Years'){ 
      $("#t_1_y_1").hide('slow');
      $("#t_1_y_2").show('slow');
      $("#t_1_y_3").hide('slow');
      $("#t_1_y_4").hide('slow');
    }
   });
</script>

The slider is working, the menu is working, but how can I get the slider to run the jQuery script?

Thanks in advance for any help.

Answer 1

Please try this:

   <script>
      $(function() {
        var select = $( "#minbeds" );
        var slider = $( "<div id='slider' style='margin-left:30px;'></div>" ).insertAfter( "#reserverer" ).slider({
         min: 1,
         max: 4,
         range: "min",
         value: select[ 0 ].selectedIndex + 1,
         slide: function( event, ui ) {
           select[ 0 ].selectedIndex = ui.value - 1;
            if(ui.value == '2') { 
              $("#t_1_y_1").hide('slow');
              $("#t_1_y_2").show('slow');
              $("#t_1_y_3").hide('slow');
              $("#t_1_y_4").hide('slow');
            }
          }
        });
        $( "#minbeds" ).change(function() {
          slider.slider( "value", this.selectedIndex + 1 );
           if($(this).val() == '2'){ 
             $("#t_1_y_1").hide('slow');
             $("#t_1_y_2").show('slow');
             $("#t_1_y_3").hide('slow');
             $("#t_1_y_4").hide('slow');
           }
        });


      });
     </script>