Example: 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.

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

Full Code Listing

HTML

Note: be sure to add the yui3-skin-sam classname to the page's <body> element or to a parent element of the widget in order to apply the default CSS skin. See Understanding Skinning.

<div id="demo" class="example yui3-skin-sam"> <!-- You need this skin class -->

    <h4>Horizontal Slider</h4>
    <p>
        <label for="horiz_value">Value: </label>
            <input id="horiz_value" value="0">
        <span class="horiz_slider"></span>
    </p>

    <h4>Vertical Slider</h4>
    <p><label for="vert_value">Value: </label><input id="vert_value" value="30"></p>
    <div class="vert_slider"></div>

</div>

JavaScript

// 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 'this' object 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

});