Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Animate jquery ui slider handle to specific value on pageload

    I'm having problems getting a slider to animate to a certain value. The value is within the handle. I want the handle to automatically move on pageload to a specific value. The value has to increment up to the value though.

    I've created a script in where I'm animating the handle but I can't get the values to increment accordingly. Here is my current script.

    Slider1:

    Code:
    $("#slider1").slider({
        max:350,
        min:100,
        step:10,
        value:100,
        animate: 'true',
    	animate: 6000,
        slide: function(event, ui) {  
            $("#amount").val(ui.value);
            $(this).find('.ui-slider-handle').html('<div class="sliderControl-label v-labelCurrent">'+ui.value+'</div>');
            
                    update();
           
        } ,
        change :function(event, ui) {  
            $("#amount").val(ui.value);
            $(this).find('.ui-slider-handle').html('<div class="sliderControl-label v-labelCurrent">'+ui.value+'</div>');
            
                    update();       
        } 
    });
    $("#slider1").slider("value", 200);
    update();
    On page load, the value should start at 100 and then automatically increment in 10's up to 200. Although, 200 just appears.

    Any help would be greatly appreciated. Cheers.

  • #2
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    Can you please provide a full example, preferably a "working" version on jsfiddle? I just tried setting this up and besides update() not being defined and it looking not exactly nice I do see the animation from 100 to 200.

  • #3
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Airblader View Post
    Can you please provide a full example, preferably a "working" version on jsfiddle? I just tried setting this up and besides update() not being defined and it looking not exactly nice I do see the animation from 100 to 200.
    Hi Airblader, the handle animates fine. It's the value in the handle which I want to animate to go from 100 to 200 in increments of 10. Here is a fiddle: http://jsfiddle.net/vNf9K/

    Thanks,

    Jonny
    Last edited by jonnystudent; 01-31-2013 at 11:42 PM.

  • #4
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Ok, I got this to work, although the animation isn't smooth.

    Code:
    $("#slider1").slider({
        max:350,
        min:100,
        step:10,
        value:100,
        slide: function(event, ui) {  
            $("#amount").val(ui.value);
            $(this).find('.ui-slider-handle').html('<div class="sliderControl-label v-labelCurrent">'+ui.value+'</div>');
            
           
        } ,
        change :function(event, ui) {  
            $("#amount").val(ui.value);
            $(this).find('.ui-slider-handle').html('<div class="sliderControl-label v-labelCurrent">'+ui.value+'</div>');
            
        } 
    });
    var val = 100;
    var timer = setInterval(function() {
        if (val <= 200) {
            $("#slider1").slider("value", val);
            val += 10;
        }
        else {
            clearInterval(timer);
        }
    }, 200);
    It would be highly appreciated if anyone can make the animation smooth.

    Cheers,

    Jonny


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •