开发者

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

开发者 https://www.devze.com 2023-03-06 19:22 出处:网络
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 changes but that seems like

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 changes but that seems like it would be a kludge.

$(".selector").slider({
    slide: function(event, ui){
        // I need to tell if the slide is left-to-right or right-to-left here.
   开发者_如何转开发 }
}); 

Thanks! Jason


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


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'.


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.

0

精彩评论

暂无评论...
验证码 换一张
取 消