jQuery slider “slide” event: How do I determine the user's slide direction?

Question

I have been dissecting the event and ui objects in firebug but it doesn\'t seem to have anything I can use. Am I missing something? I suppose I can keep track of the value chang

Answer 1

If you want to get the direction (value decreases or increases) just use the start and slide event. Store the inital value in a variable when the start event is fired. After that just compare this stored value against the value the sliding event creates.

Just combine different events.

Before edit:

Use the documented getter

var orientation = $( ".selector" ).slider( "option", "orientation" );

This option determines whether the slider has the min at the left, the max at the right or the min at the bottom, the max at the top. Possible values: 'horizontal', 'vertical'.

Answer 2

Easy solution is simply to use negative range (instead of [1 - 10] use [-10 , -1]:

        $("#slider-roomsrange").slider({
        range: true,
        min: -10,
        max: -1,
        step: -.5,
        values: [-3, -1],
        slide: function (event, ui) {
            $("#roomsfrom").val((ui.values[0]*-1));
            $("#roomsto").val((ui.values[1]*-1));
           // $("#rooms").val(ui.values[1] + " - " + ui.values[0]);
        }
    });

I'm reversing the value to be positive by using *-1 and works gret.

*Only problem I have at the moment is that the step is 1 and not .5 as I expected.

Answer 3

For everyone wondering how to solve this problem, I just found a solution:

Start of with two global vars containing the slides to begin with. My slider always starts at 0 and goes from left to right so the first nexSlide wikll be 1. Now you can simply compare the two to see which direction you'r sliding. This method is most efficient because it detects changes in direction without stopping the slide.

   var currentSlide = 0; var nextSlide = 1;

   jQuery( "#slider" ).bind( "slide", function(event, ui) {
       currentSlide = jQuery('#slider').slider('value');
       nextSlide = ui.value;
    });