Jquery set slider value

Question

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

<div id="inputs" style="margin-top: 10px;">
      <div style="margin-top: 0px; margin-bottom: 2px;">
        <input type="text" name="date_start" id="date_start" style="width: 59%;" value="TEMPlate_date_start;">
        <input type="text" name="time_start" id="time_start" style="width: 30%;" value="TEMPlate_time_start;">
      </div>
      <div style="margin-top: 2px; margin-bottom: 2px;">
        <input type="text" name="date_end" id="date_end" style="width: 59%;" value="TEMPlate_date_end;">
        <input type="text" name="time_end" id="time_end" style="width: 30%;" value="TEMPlate_time_end;">
      </div>
</div>

<!-- Here is DIV with SLIDER -->
<div style="margin-top: 6px;margin-bottom: 45px;">
      <div id="slider" style="width: 90%;"></div>
</div>

<!-- Here is flying DIV with slider value -->
<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;">Last 1 hour</div>


<script type="text/javascript">        
    var mouseX = 0;
    var mouseY = 0;
    $(document).mousemove( function(e) {
      mouseX = e.pageX;
      mouseY = e.pageY;
    });

    function leadingZero(value)
    {
      return (value<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) < parseInt(left-10) ) left = $("a.ui-slider-handle").offset().left+10;
        if( parseInt($('#amount').width()+left) > parseInt($("#slider").offset().left+$("#slider").width()) )
        {
          left = $("#slider").offset().left+$("#slider").width()-$("#amount").width();
        }

        $("#amount").css('left', left);
     }
});
    </script>

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

   <div style="margin-top: 5px; margin-bottom: 2px;">
      <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;')">
      <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;')">
      <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;')">
      <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;')">
    </div>

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 :(

I tried it like this in firebug console:

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);

I have really no idea what Im doing wrong, could anyone please help me? Thanks

Answer 1

The crux of your problem is that you specify the values: [0] option for the slider parameters, when you really only want the singular version.

i.e. value: 0

You also only define the giant, unwieldy function for the slide callback, not the change callback as well (which is the one called if the value gets changed programmatically). To do this, try refactoring out that giant callback into its own function, and reference that in the slider setup:

e.g.

function sliderChange(event, ui) {
    // big chunk of code here
}

$("#slider").slider({
    min: 0,
    max: slider_max,
    step: 1,
    value: 0,
    slide: sliderChange,
    change: sliderChange
});

Next, you will need to change that function to make sure it isn't using the mouseX co-ordinates for setting the position of the #amount div, since that won't be valid when you set the value programmatically using the buttons.

Finally, you should be able to use $('#slider').slider('value', <some_value>); to set the value. I recommend against using the onclick attribute, though, and refactoring it to something like:

$('input.ts').click(function() {
    var btnText = $(this).val();
    if (btnText == 'Last 24h') {
        $('#slider').slider('value', 0);
        $('#date_start').val('TEMPlate_l24h_start;');
        $('#date_end').val('TEMPlate_l24h_end;');
        $('#time_start').val('TEMPlate_time_end;');
        $('#time_end').val('TEMPlate_time_end;');
    } else if (btnText == 'Last 2d') {
        $('#slider').slider('value', 10); // put correct value here
        $('#date_start').val('TEMPlate_l2d_start;');
        $('#date_end').val('TEMPlate_l2d_end;');
        $('#time_start').val('TEMPlate_time_end;');
        $('#time_end').val('TEMPlate_time_end;');
    } else if (btnText == 'Last 1w') {
        $('#slider').slider('value', 15); // put correct value here
        $('#date_start').val('TEMPlate_l1w_start;');
        $('#date_end').val('TEMPlate_l1w_end;');
        $('#time_start').val('TEMPlate_time_end;');
        $('#time_end').val('TEMPlate_time_end;');
    } else if (btnText == 'Last 30d') {
        $('#slider').slider('value', 25); // put correct value here
        $('#date_start').val('TEMPlate_l1m_start;');
        $('#date_end').val('TEMPlate_l1m_end;');
        $('#time_start').val('TEMPlate_time_end;');
        $('#time_end').val('TEMPlate_time_end;');
    }
    return false;
});

You should also clean up that function a little (use an inner function perhaps to reduce the repetition).

Does that make sense? The rest should be just minor tweaks.

EDIT: Here is the jsFiddle I used for testing. It's not quite there yet, but you get the idea: http://jsfiddle.net/greglockwood/NTrXH/3/