Animating Slider Positions

Animating the position of the jQuery UI slider handle when first created.

by Adam Boduch

HTML

<div id="slider1"></div>
<div id="slider2"></div>
<div id="slider3"></div>

CSS

body {
    font-size: 0.8em;
    margin: 2em;
}

div {
    width: 60%;
    margin: 2em;
}

JavaScript

(function( $ ) {
    
    // Custom slider widget
    $.widget( "app.slider", $.ui.slider, {
    
        _create: function() {
            
            // The options we need
            var value = this.options.value,
                animate = this.options.animate;
            
            // Only customize behavior if the value is a
            // non-zero number and there's an animate option.
            if ( value > 0 && animate ) {
                
                // Reset the value option to zero, and call
                // the constructor as usual.
                this.options.value = 0;
                this._super();
                
                // Restore the value, and animate the slider
                // position.
                this.options.value = value;
                this._refreshValue();
            } else {
                this._super();
            }
        }
                
    });
    
})( jQuery );

$(function() {
    
    $( "#slider1" ).slider({
        animate: "slow",
        value: 50
    });
    
    $( "#slider2" ).slider({
        animate: "slow",
        value: 25
    });
    
    $( "#slider3" ).slider({
        animate: "slow",
        value: 75
    });

});