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 use the default value range of 0 - 100 and use default skin resources provided with the Sam skin.

The first Slider is set up in a more traditional JavaScript coding style and the second using the shorter method chaining style. The first Slider is configured to move along the vertical axis, and is initialized to a value of 30. The second Slider is horizontal and instantiated with minimal configuration.

View example in new window.

#### Vertical Slider

Value: 30

#### Horizontal Slider

Value: 0

### Creating a Slider from script

In this example, we'll be generating an X axis and Y axis Slider using entirely JavaScript. To start, we'll need elements on the page into which the Sliders will be rendered.

        <h4>Vertical Slider</h4>    <p id="vert_value">Value: 0</p>    <div class="vert_slider"></div>     <h4>Horizontal Slider</h4>    <p id="horiz_value">Value: 0</p>    <div class="horiz_slider"></div>

        <h4>Vertical Slider</h4>
        <p id="vert_value">Value: 0</p>
        <div class="vert_slider"></div>

        <h4>Horizontal Slider</h4>
        <p id="horiz_value">Value: 0</p>
        <div class="horiz_slider"></div>

<h4>Vertical Slider</h4> <p id="vert_value">Value: 0</p> <div class="vert_slider"></div> <h4>Horizontal Slider</h4> <p id="horiz_value">Value: 0</p> <div class="horiz_slider"></div>

### Set up your YUI instance

Create a YUI instance and `use` the `slider` module.

    YUI({base:"../../build/", timeout: 10000}).use("slider", function (Y) { /* our code goes here */ });

    YUI({base:"../../build/", timeout: 10000}).use("slider", function (Y) {

    /* our code goes here */

    });

YUI({base:"../../build/", timeout: 10000}).use("slider", function (Y) { /* our code goes here */ });

### Creating a vertical Slider

To create a vertical Slider you just need to set the `axis` attribute to "y". The Sam skin comes with a thumb image for both horizontal and vertical Sliders.

    var vert_slider; // instantiate the vertical Slider.  Use the classic Y thumb provided with the// Sam skinvert_slider = new Y.Slider({    axis: 'y',        // vertical Slider    value: 30,        // initial value    railSize: '10em', // range the thumb can move through    thumbImage: '../../build/slider/assets/skins/sam/thumb-classic-y.png'});

    var vert_slider;

    // instantiate the vertical Slider.  Use the classic Y thumb provided with the
    // Sam skin
    vert_slider = new Y.Slider({
        axis: 'y',        // vertical Slider
        value: 30,        // initial value
        railSize: '10em', // range the thumb can move through
        thumbImage: '../../build/slider/assets/skins/sam/thumb-classic-y.png'
    });

var vert_slider; // instantiate the vertical Slider. Use the classic Y thumb provided with the // Sam skin vert_slider = new Y.Slider({ axis: 'y', // vertical Slider value: 30, // initial value railSize: '10em', // range the thumb can move through thumbImage: '../../build/slider/assets/skins/sam/thumb-classic-y.png' });

We'll subscribe to our Slider's `valueChange` event and display the current value in the `#vert_value` Node above the Slider.

    var v_report = Y.one('#vert_value'); // callback function to display Slider's current valuefunction reportValue(e) {    v_report.set('innerHTML', 'Value: ' + e.newVal);} vert_slider.after('valueChange', reportValue);

    var v_report = Y.one('#vert_value');

    // callback function to display Slider's current value
    function reportValue(e) {
        v_report.set('innerHTML', 'Value: ' + e.newVal);
    }

    vert_slider.after('valueChange', reportValue);

var v_report = Y.one('#vert_value'); // callback function to display Slider's current value function reportValue(e) { v_report.set('innerHTML', 'Value: ' + e.newVal); } vert_slider.after('valueChange', reportValue);

Then finally, we'll render the Slider into the first element with the class "vert_slider".

    vert_slider.render('.vert_slider');

    vert_slider.render('.vert_slider');

vert_slider.render('.vert_slider');

### Creating a horizontal Slider

Sliders are horizontal by default, so there's no need to specify the `axis` attribute. In lieu of an initial `value` setting, the `min` is used. Slider's default `min` and `max` are 0 and 100 respectively. All we need to do is describe how long the Slider's rail is and what (if any) thumb image to use.

    var horiz_slider = new Y.Slider({    railSize: '200px',    thumbImage: '../../build/slider/assets/skins/sam/thumb-classic-x.png'});

    var horiz_slider = new Y.Slider({
        railSize: '200px',
        thumbImage: '../../build/slider/assets/skins/sam/thumb-classic-x.png'
    });

var horiz_slider = new Y.Slider({ railSize: '200px', thumbImage: '../../build/slider/assets/skins/sam/thumb-classic-x.png' });

Rather than store the Slider in a variable this time around, however, let's use method chaining to render and set up the display handler inline.

    new Y.Slider({        railSize: '200px',        thumbImage: '../../build/slider/assets/skins/sam/thumb-classic-x.png'    }).    render('.horiz_slider').    after('valueChange',function (e) {        Y.one('#horiz_value').set('innerHTML', 'Value: ' + e.newVal);    });

    new Y.Slider({
            railSize: '200px',
            thumbImage: '../../build/slider/assets/skins/sam/thumb-classic-x.png'
        }).
        render('.horiz_slider').
        after('valueChange',function (e) {
            Y.one('#horiz_value').set('innerHTML', 'Value: ' + e.newVal);
        });

new Y.Slider({ railSize: '200px', thumbImage: '../../build/slider/assets/skins/sam/thumb-classic-x.png' }). render('.horiz_slider'). after('valueChange',function (e) { Y.one('#horiz_value').set('innerHTML', 'Value: ' + e.newVal); });

And that's all there is to it!

### Full Code Listing

    // Create a YUI instance and request the slider module and its dependenciesYUI({base:"../../build/", timeout: 10000}).use("slider", function (Y) { // store the node to display the vertical Slider's current valuevar v_report = Y.one('#vert_value'),    vert_slider; // instantiate the vertical Slider.  Use the classic thumb provided with the// Sam skinvert_slider = new Y.Slider({    axis: 'y', // vertical Slider    value: 30, // initial value    railSize: '10em', // range the thumb can move through    thumbImage: '../../build/slider/assets/skins/sam/thumb-classic-y.png'}); // callback function to display Slider's current valuefunction reportValue(e) {    v_report.set('innerHTML', 'Value: ' + e.newVal);} vert_slider.after('valueChange', reportValue); // render the slider into the first element with class vert_slidervert_slider.render('.vert_slider');   // instantiate the horizontal Slider, render it, and subscribe to its// valueChange event via method chaining.  No need to store the created Slider// in this case.new Y.Slider({        railSize: '200px',        thumbImage: '../../build/slider/assets/skins/sam/thumb-classic-x.png'    }).    render('.horiz_slider').    after('valueChange',function (e) {        Y.one('#horiz_value').set('innerHTML', 'Value: ' + e.newVal);    }); });

    // Create a YUI instance and request the slider module and its dependencies
    YUI({base:"../../build/", timeout: 10000}).use("slider", function (Y) {

    // store the node to display the vertical Slider's current value
    var v_report = Y.one('#vert_value'),
        vert_slider;

    // instantiate the vertical Slider.  Use the classic thumb provided with the
    // Sam skin
    vert_slider = new Y.Slider({
        axis: 'y', // vertical Slider
        value: 30, // initial value
        railSize: '10em', // range the thumb can move through
        thumbImage: '../../build/slider/assets/skins/sam/thumb-classic-y.png'
    });

    // callback function to display Slider's current value
    function reportValue(e) {
        v_report.set('innerHTML', 'Value: ' + e.newVal);
    }

    vert_slider.after('valueChange', reportValue);

    // render the slider into the first element with class vert_slider
    vert_slider.render('.vert_slider');

    // instantiate the horizontal Slider, render it, and subscribe to its
    // valueChange event via method chaining.  No need to store the created Slider
    // in this case.
    new Y.Slider({
            railSize: '200px',
            thumbImage: '../../build/slider/assets/skins/sam/thumb-classic-x.png'
        }).
        render('.horiz_slider').
        after('valueChange',function (e) {
            Y.one('#horiz_value').set('innerHTML', 'Value: ' + e.newVal);
        });

    });

// Create a YUI instance and request the slider module and its dependencies YUI({base:"../../build/", timeout: 10000}).use("slider", function (Y) { // store the node to display the vertical Slider's current value var v_report = Y.one('#vert_value'), vert_slider; // instantiate the vertical Slider. Use the classic thumb provided with the // Sam skin vert_slider = new Y.Slider({ axis: 'y', // vertical Slider value: 30, // initial value railSize: '10em', // range the thumb can move through thumbImage: '../../build/slider/assets/skins/sam/thumb-classic-y.png' }); // callback function to display Slider's current value function reportValue(e) { v_report.set('innerHTML', 'Value: ' + e.newVal); } vert_slider.after('valueChange', reportValue); // render the slider into the first element with class vert_slider vert_slider.render('.vert_slider'); // instantiate the horizontal Slider, render it, and subscribe to its // valueChange event via method chaining. No need to store the created Slider // in this case. new Y.Slider({ railSize: '200px', thumbImage: '../../build/slider/assets/skins/sam/thumb-classic-x.png' }). render('.horiz_slider'). after('valueChange',function (e) { Y.one('#horiz_value').set('innerHTML', 'Value: ' + e.newVal); }); });

Copyright © 2009 Yahoo! Inc. All rights reserved.

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