Question

The jQuery UI slider allows events to be triggered on start, slide, change, stop (see: http://jqueryui.com/demos/slider/#events)

I need values to be shown in an input field during SLIDE, and need a form to submit on STOP. However it seems that if the function has two even triggers, it fails to render the slider.

Here’s the working code:

 <script>
 $(function() {
  $( "#slider-range" ).slider({
   range: true,
   min: 50,
   step: 10,
   max: 500,
   values: [ 75, 450 ],
   slide: function( event, ui ) {
    $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] + " avg/night" );
    $( "#edit-nightlyavg-min" ).val( ui.values[ 0 ] );
    $( "#edit-nightlyavg-max" ).val( ui.values[ 1 ] );
   }
  });
  $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
   " - $" + $( "#slider-range" ).slider( "values", 1 ) + " avg/night" );
  $( "#edit-nightlyavg-op" ).val( "between" );

 });
 </script>

Here’s the non-working code:

     <script>
 $(function() {
  $( "#slider-range" ).slider({
   range: true,
   min: 50,
   step: 10,
   max: 500,
   values: [ 75, 450 ],
   slide: function( event, ui ) {
    $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] + " avg/night" );
    $( "#edit-nightlyavg-min" ).val( ui.values[ 0 ] );
    $( "#edit-nightlyavg-max" ).val( ui.values[ 1 ] );
   }
   stop: function( event, ui ) {
    $( "#views-exposed-form-location-directory-page-1" ).submit();
   }
  });
  $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
   " - $" + $( "#slider-range" ).slider( "values", 1 ) + " avg/night" );
  $( "#edit-nightlyavg-op" ).val( "between" );

 });
 </script>

Answer 1

You forgot the , after the ‘slide’ function.