title: Jquery set slider value
body: <p>I have one slider to select time range, from 1 (,2,3,..) day (,weeks,months,..) ago until now. It sets time and date in inputs and it works correctly with this code</p>
  
  <pre><code>&lt;div id="inputs" style="margin-top: 10px;"&gt;
        &lt;div style="margin-top: 0px; margin-bottom: 2px;"&gt;
          &lt;input type="text" name="date_start" id="date_start" style="width: 59%;" value="TEMPlate_date_start;"&gt;
          &lt;input type="text" name="time_start" id="time_start" style="width: 30%;" value="TEMPlate_time_start;"&gt;
        &lt;/div&gt;
        &lt;div style="margin-top: 2px; margin-bottom: 2px;"&gt;
          &lt;input type="text" name="date_end" id="date_end" style="width: 59%;" value="TEMPlate_date_end;"&gt;
          &lt;input type="text" name="time_end" id="time_end" style="width: 30%;" value="TEMPlate_time_end;"&gt;
        &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;!-- Here is DIV with SLIDER --&gt;
  &lt;div style="margin-top: 6px;margin-bottom: 45px;"&gt;
        &lt;div id="slider" style="width: 90%;"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;!-- Here is flying DIV with slider value --&gt;
  &lt;div id="amount" style="font-size: 13px;height: 15px;padding: 5px;width: 70px;position: relative;top: -25px;margin-bottom: -25px;color:#666;border:1px solid #CCC;background-color: #EEE; border-radius:5px;"&gt;Last 1 hour&lt;/div&gt;
  
  
  &lt;script type="text/javascript"&gt;        
      var mouseX = 0;
      var mouseY = 0;
      $(document).mousemove( function(e) {
        mouseX = e.pageX;
        mouseY = e.pageY;
      });
  
      function leadingZero(value)
      {
        return (value&lt;10||value.length==1)? '0'+value : value;
      }
  
      // maximum value of slider
      var slider_max = TEMPlate_slider_max;
      // How many buttons are under slider
      var slider_options_count = TEMPlate_slider_options_count;
      // Unit for each of the button under slider
      var range_units = new Array('hours', 'days', 'weeks', '* 30 days');
      // How many times is value of button under slider bigger then 1second
      var range_multipliers = new Array(60*60, 60*60*24, 60*60*24*7, 60*60*24*30);
  
      $( "#slider" ).slider({
              //value:100,
              min: 0,
              max: slider_max,
              step: 1,
              values: [0],
              slide: function( event, ui ) {
          var range_value = ui.value;
  
          var option_size = slider_max/slider_options_count;
          var range = Math.floor(range_value / (option_size));
          if(range_value == slider_max ) range--;
          var value = (range_value - range*option_size) + 1;
  
          // set time_end and date_end with actual date/time
          var date = new Date();
          $("#time_end").val( leadingZero(date.getHours())+":"+leadingZero(date.getMinutes()) );
          $("#date_end").val( leadingZero(date.getDate()) + "/" + leadingZero((date.getMonth()+1)) + "/" + date.getFullYear() );
  
          // calculate starting timestamp
          date.setTime( (date.getTime()/1000 - value*range_multipliers[range])*1000 );
          // setting time_start and date_start with starting timestamp
          $("#time_start").val( leadingZero(date.getHours())+":"+leadingZero(date.getMinutes()) );
          $("#date_start").val( leadingZero(date.getDate()) + "/" + leadingZero(date.getMonth()+1) + "/" + leadingZero(date.getFullYear()) );
  
  
          // set amount value
          $("#amount").css('width', 'auto');
          $("#amount").text("Last "+value+" "+ range_units[range] );
          // set amount css
          if( $("#amount").css('position') != 'absolute' )
          {
            $("#amount").css('position', 'absolute');
            $("#inputs").css('margin-top', '55px');
          }
          $("#amount").css('top', $("#slider").offset().top+30);
          //if( $.browsr.msie ) $("#amount").css('top', $("#slider").offset().top+20);
  
          // count left position
          var left = mouseX;
  
          if( parseInt($("#amount").offset().left) &lt; parseInt(left-10) ) left = $("a.ui-slider-handle").offset().left+10;
          if( parseInt($('#amount').width()+left) &gt; parseInt($("#slider").offset().left+$("#slider").width()) )
          {
            left = $("#slider").offset().left+$("#slider").width()-$("#amount").width();
          }
  
          $("#amount").css('left', left);
       }
  });
      &lt;/script&gt;
  </code></pre>
  
  <p>The problem is, I have four buttons above the slider with predefined values, they set the inputs, but I cant set the slider :-/. This is the buttons</p>
  
  <pre><code>   &lt;div style="margin-top: 5px; margin-bottom: 2px;"&gt;
        &lt;input type="button" class="ts" value="Last 24h" onclick="$('#slider').slider('option', 'value', 0);$('#slider').slider('refresh');$('#date_start').val('TEMPlate_l24h_start;');$('#date_end').val('TEMPlate_l24h_end;');$('#time_start').val('TEMPlate_time_end;');$('#time_end').val('TEMPlate_time_end;')"&gt;
        &lt;input type="button" class="ts" value="Last 2d" onclick="$('#date_start').val('TEMPlate_l2d_start;');$('#date_end').val('TEMPlate_l2d_end;');$('#time_start').val('TEMPlate_time_end;');$('#time_end').val('TEMPlate_time_end;')"&gt;
        &lt;input type="button" class="ts" value="Last 1w" onclick="$('#date_start').val('TEMPlate_l1w_start;');$('#date_end').val('TEMPlate_l1w_end;');$('#time_start').val('TEMPlate_time_end;');$('#time_end').val('TEMPlate_time_end;')"&gt;
        &lt;input type="button" class="ts" value="Last 30d" onclick="$('#date_start').val('TEMPlate_l1m_start;');$('#date_end').val('TEMPlate_l1m_end;');$('#time_start').val('TEMPlate_time_end;');$('#time_end').val('TEMPlate_time_end;')"&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>I tried various commands in "onclick" attribute, I tried to force the click on slider via event, I tried to force the "slide" event, set the value, nothing works :(</p>
  
  <p>I tried it like this in firebug console:</p>
  
  <pre><code>var e = jQuery.Event("click");
  e.pageX = $('#slider').offset().left+100;
  e.pageY = $('#slider').offset().top+7;
  $('#slider').trigger(e);
  
  $('#slider').slider('value', 2 );
  $('#slider').slider( {value: 2} );
  $('#slider').slider('option', 'value', 2 );
  $('#slider').val( 2 );
  $("#slider").trigger("slide");
  
  var e = jQuery.Event("slide");
  e.pageX = $('#slider').offset().left+100;
  e.pageY = $('#slider').offset().top+7;
  $('#slider').trigger(e);
  </code></pre>
  
  <p>I have really no idea what Im doing wrong, could anyone please help me?
  Thanks</p>