YUI 3.x Home -

Site Search (YDN & YUIBlog):

# YUI Library Examples: Slider: Basic Sliders

## Slider: Basic Sliders

This example walks you through the basics of creating a Slider from script. Both Sliders in this example link to text input fields that expect numeric input. The first Slider uses the default configuration, spanning values between 0 and 100, and is rendered inline.

The second Slider is configured to orient vertically (along the y axis) and the configuration includes minimum, maximium, and initial values. It is rendered into a `<div>`.

The first Slider is set up in a more traditional JavaScript coding style and the second using the shorter, method chaining style.

View example in new window.

#### Horizontal Slider

Value:

#### Vertical Slider

Value:

### Horizontal Slider with default configuration

Sliders are horizontal by default, with available values ranging from 0 to 100, and an initial value of 0. The rail is 150 pixels long plus a few pixels for the rail's end caps.

    var xSlider = new Y.Slider(); // render into the <span> next to the inputxSlider.render( ".horiz_slider" );

    var xSlider = new Y.Slider();

    // render into the <span> next to the input
    xSlider.render( ".horiz_slider" );

var xSlider = new Y.Slider(); // render into the <span> next to the input xSlider.render( ".horiz_slider" );

### Linking a Slider with a text input

To keep the Slider's value and input value in sync, you need to subscribe to events on both the input and the Slider. For Slider-to-input, the interesting event is `valueChange`.

    // Function to update the input value from the Slider valuefunction updateInput( e ) {    this.set( "value", e.newVal );} var xInput = Y.one( "#horiz_value" );// Subscribe to the Slider's valueChange event, passing the input as the 'this'xSlider.on( "valueChange", updateInput, xInput );

    // Function to update the input value from the Slider value
    function updateInput( e ) {
        this.set( "value", e.newVal );
    }

    var xInput = Y.one( "#horiz_value" );
    // Subscribe to the Slider's valueChange event, passing the input as the 'this'
    xSlider.on( "valueChange", updateInput, xInput );

// Function to update the input value from the Slider value function updateInput( e ) { this.set( "value", e.newVal ); } var xInput = Y.one( "#horiz_value" ); // Subscribe to the Slider's valueChange event, passing the input as the 'this' xSlider.on( "valueChange", updateInput, xInput );

### Linking the input with the Slider

To feed input changes back to the Slider we'll listen to its `keyup` event. But we'll put the update on a delay to allow for a user to finish typing.

Additionally, we'll make the update function generic, since we have two Sliders in this example. We'll leverage the `setData` and `getData` methods of Node instances and store a reference to the Slider. Then we can use this object from inside the function to get back to the slider the input is related to.

    // Function to pass input value back to the Sliderfunction updateSlider( e ) {    var data   = this.getData(),        slider = data.slider,        value  = parseInt( this.get( "value" ), 10 );     if ( data.wait ) {        data.wait.cancel();    }     // Update the Slider on a delay to allow time for typing    data.wait = Y.later( 200, slider, function () {        data.wait = null;        this.set( "value", value );    } );} xInput.setData( { slider: xSlider } );xInput.on( "keyup", updateSlider );

    // Function to pass input value back to the Slider
    function updateSlider( e ) {
        var data   = this.getData(),
            slider = data.slider,
            value  = parseInt( this.get( "value" ), 10 );

        if ( data.wait ) {
            data.wait.cancel();
        }

        // Update the Slider on a delay to allow time for typing
        data.wait = Y.later( 200, slider, function () {
            data.wait = null;
            this.set( "value", value );
        } );
    }

    xInput.setData( { slider: xSlider } );
    xInput.on( "keyup", updateSlider );

// Function to pass input value back to the Slider function updateSlider( e ) { var data = this.getData(), slider = data.slider, value = parseInt( this.get( "value" ), 10 ); if ( data.wait ) { data.wait.cancel(); } // Update the Slider on a delay to allow time for typing data.wait = Y.later( 200, slider, function () { data.wait = null; this.set( "value", value ); } ); } xInput.setData( { slider: xSlider } ); xInput.on( "keyup", updateSlider );

### Creating the vertical Slider

To create a vertical Slider you just need to set the `axis` attribute to "y".

For this Slider, we'll use more extensive method chaining and include value and rail configurations. First we'll change the value range from 0 - 100 to -100 - +100 and set an initial value of +30.

Note that the `min` configuration is 100 in this case because the top is associated with the minimum value. Slider has no qualms about `min` being greater than `max`.

The rail length is then configured to be 201 pixels, so each value has a distinct pixel position on the rail (don't forget 0).

Finally, the `valueChange` subscription is included in the configuration as well.

    var yInput = Y.one( "#vert_value" );yInput.setData( "slider", new Y.Slider({            axis: 'y',            min   : 100,      // min is the value at the top            max   : -100,     // max is the value at the bottom            value : 30,       // initial value            length: '201px',  // rail extended to afford all values             // construction-time event subscription            after : {                valueChange: Y.bind( updateInput, yInput )            }        }).render( ".vert_slider" ) // render returns the Slider    )                               // set( "data", ... ) returns the Node    .on( "keyup", updateSlider );   // chain the keyup subscription

    var yInput = Y.one( "#vert_value" );
    yInput.setData( "slider", new Y.Slider({
                axis: 'y',
                min   : 100,      // min is the value at the top
                max   : -100,     // max is the value at the bottom
                value : 30,       // initial value
                length: '201px',  // rail extended to afford all values

                // construction-time event subscription
                after : {
                    valueChange: Y.bind( updateInput, yInput )
                }
            }).render( ".vert_slider" ) // render returns the Slider
        )                               // set( "data", ... ) returns the Node
        .on( "keyup", updateSlider );   // chain the keyup subscription

var yInput = Y.one( "#vert_value" ); yInput.setData( "slider", new Y.Slider({ axis: 'y', min : 100, // min is the value at the top max : -100, // max is the value at the bottom value : 30, // initial value length: '201px', // rail extended to afford all values // construction-time event subscription after : { valueChange: Y.bind( updateInput, yInput ) } }).render( ".vert_slider" ) // render returns the Slider ) // set( "data", ... ) returns the Node .on( "keyup", updateSlider ); // chain the keyup subscription

### Full Code Listing

    // Create a YUI instance and request the slider module and its dependenciesYUI().use("slider", function (Y) { var xInput,  // input tied to xSlider    yInput,  // input tied to ySlider    xSlider; // horizontal Slider // Function to pass input value back to the Sliderfunction updateSlider( e ) {    var data   = this.getData(),        slider = data.slider,        value  = parseInt( this.get( "value" ), 10 );     if ( data.wait ) {        data.wait.cancel();    }     // Update the Slider on a delay to allow time for typing    data.wait = Y.later( 200, slider, function () {        data.wait = null;        this.set( "value", value );    } );} // Function to update the input value from the Slider valuefunction updateInput( e ) {    this.set( "value", e.newVal );}   // Create a horizontal Slider using all defaultsxSlider = new Y.Slider(); // Link the input value to the SliderxInput = Y.one( "#horiz_value" );xInput.setData( { slider: xSlider } ); // Pass the input as the third arg to be 'this' inside updateInputxSlider.after( "valueChange", updateInput, xInput );xInput.on( "keyup", updateSlider ); // Render the Slider next to the inputxSlider.render('.horiz_slider')  // Create the vertical Slider.yInput = Y.one( "#vert_value" );yInput.setData( "slider", new Y.Slider({            axis: 'y',            min   : 100,      // min is the value at the top            max   : -100,     // max is the value at the bottom            value : 30,       // initial value            length: '201px',  // rail extended to afford all values             // construction-time event subscription            after : {                valueChange: Y.bind( updateInput, yInput )            }        }).render( ".vert_slider" ) // render returns the Slider    )                               // set( "data", ... ) returns the Node    .on( "keyup", updateSlider );   // chain the keyup subscription });

    // Create a YUI instance and request the slider module and its dependencies
    YUI().use("slider", function (Y) {

    var xInput,  // input tied to xSlider
        yInput,  // input tied to ySlider
        xSlider; // horizontal Slider

    // Function to pass input value back to the Slider
    function updateSlider( e ) {
        var data   = this.getData(),
            slider = data.slider,
            value  = parseInt( this.get( "value" ), 10 );

        if ( data.wait ) {
            data.wait.cancel();
        }

        // Update the Slider on a delay to allow time for typing
        data.wait = Y.later( 200, slider, function () {
            data.wait = null;
            this.set( "value", value );
        } );
    }

    // Function to update the input value from the Slider value
    function updateInput( e ) {
        this.set( "value", e.newVal );
    }

    // Create a horizontal Slider using all defaults
    xSlider = new Y.Slider();

    // Link the input value to the Slider
    xInput = Y.one( "#horiz_value" );
    xInput.setData( { slider: xSlider } );

    // Pass the input as the third arg to be 'this' inside updateInput
    xSlider.after( "valueChange", updateInput, xInput );
    xInput.on( "keyup", updateSlider );

    // Render the Slider next to the input
    xSlider.render('.horiz_slider')

    // Create the vertical Slider.
    yInput = Y.one( "#vert_value" );
    yInput.setData( "slider", new Y.Slider({
                axis: 'y',
                min   : 100,      // min is the value at the top
                max   : -100,     // max is the value at the bottom
                value : 30,       // initial value
                length: '201px',  // rail extended to afford all values

                // construction-time event subscription
                after : {
                    valueChange: Y.bind( updateInput, yInput )
                }
            }).render( ".vert_slider" ) // render returns the Slider
        )                               // set( "data", ... ) returns the Node
        .on( "keyup", updateSlider );   // chain the keyup subscription

    });

// Create a YUI instance and request the slider module and its dependencies YUI().use("slider", function (Y) { var xInput, // input tied to xSlider yInput, // input tied to ySlider xSlider; // horizontal Slider // Function to pass input value back to the Slider function updateSlider( e ) { var data = this.getData(), slider = data.slider, value = parseInt( this.get( "value" ), 10 ); if ( data.wait ) { data.wait.cancel(); } // Update the Slider on a delay to allow time for typing data.wait = Y.later( 200, slider, function () { data.wait = null; this.set( "value", value ); } ); } // Function to update the input value from the Slider value function updateInput( e ) { this.set( "value", e.newVal ); } // Create a horizontal Slider using all defaults xSlider = new Y.Slider(); // Link the input value to the Slider xInput = Y.one( "#horiz_value" ); xInput.setData( { slider: xSlider } ); // Pass the input as the third arg to be 'this' inside updateInput xSlider.after( "valueChange", updateInput, xInput ); xInput.on( "keyup", updateSlider ); // Render the Slider next to the input xSlider.render('.horiz_slider') // Create the vertical Slider. yInput = Y.one( "#vert_value" ); yInput.setData( "slider", new Y.Slider({ axis: 'y', min : 100, // min is the value at the top max : -100, // max is the value at the bottom value : 30, // initial value length: '201px', // rail extended to afford all values // construction-time event subscription after : { valueChange: Y.bind( updateInput, yInput ) } }).render( ".vert_slider" ) // render returns the Slider ) // set( "data", ... ) returns the Node .on( "keyup", updateSlider ); // chain the keyup subscription });

Copyright © 2010 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings