YUI 3.x Home -

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.

  1.     <h4>Vertical Slider</h4>
  2.     <p id="vert_value">Value: 0</p>
  3.     <div class="vert_slider"></div>
  4.  
  5.     <h4>Horizontal Slider</h4>
  6.     <p id="horiz_value">Value: 0</p>
  7.     <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.

  1. YUI({base:"../../build/", timeout: 10000}).use("slider", function (Y) {
  2.  
  3. /* our code goes here */
  4.  
  5. });
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.

  1. var vert_slider;
  2.  
  3. // instantiate the vertical Slider.  Use the classic Y thumb provided with the
  4. // Sam skin
  5. vert_slider = new Y.Slider({
  6.     axis: 'y',        // vertical Slider
  7.     value: 30,        // initial value
  8.     railSize: '10em', // range the thumb can move through
  9.     thumbImage: '../../build/slider/assets/skins/sam/thumb-classic-y.png'
  10. });
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.

  1. var v_report = Y.one('#vert_value');
  2.  
  3. // callback function to display Slider's current value
  4. function reportValue(e) {
  5.     v_report.set('innerHTML', 'Value: ' + e.newVal);
  6. }
  7.  
  8. 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".

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

  1. var horiz_slider = new Y.Slider({
  2.     railSize: '200px',
  3.     thumbImage: '../../build/slider/assets/skins/sam/thumb-classic-x.png'
  4. });
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.

  1. new Y.Slider({
  2.         railSize: '200px',
  3.         thumbImage: '../../build/slider/assets/skins/sam/thumb-classic-x.png'
  4.     }).
  5.     render('.horiz_slider').
  6.     after('valueChange',function (e) {
  7.         Y.one('#horiz_value').set('innerHTML', 'Value: ' + e.newVal);
  8.     });
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

  1. // Create a YUI instance and request the slider module and its dependencies
  2. YUI({base:"../../build/", timeout: 10000}).use("slider", function (Y) {
  3.  
  4. // store the node to display the vertical Slider's current value
  5. var v_report = Y.one('#vert_value'),
  6.     vert_slider;
  7.  
  8. // instantiate the vertical Slider.  Use the classic thumb provided with the
  9. // Sam skin
  10. vert_slider = new Y.Slider({
  11.     axis: 'y', // vertical Slider
  12.     value: 30, // initial value
  13.     railSize: '10em', // range the thumb can move through
  14.     thumbImage: '../../build/slider/assets/skins/sam/thumb-classic-y.png'
  15. });
  16.  
  17. // callback function to display Slider's current value
  18. function reportValue(e) {
  19.     v_report.set('innerHTML', 'Value: ' + e.newVal);
  20. }
  21.  
  22. vert_slider.after('valueChange', reportValue);
  23.  
  24. // render the slider into the first element with class vert_slider
  25. vert_slider.render('.vert_slider');
  26.  
  27.  
  28.  
  29. // instantiate the horizontal Slider, render it, and subscribe to its
  30. // valueChange event via method chaining.  No need to store the created Slider
  31. // in this case.
  32. new Y.Slider({
  33.         railSize: '200px',
  34.         thumbImage: '../../build/slider/assets/skins/sam/thumb-classic-x.png'
  35.     }).
  36.     render('.horiz_slider').
  37.     after('valueChange',function (e) {
  38.         Y.one('#horiz_value').set('innerHTML', 'Value: ' + e.newVal);
  39.     });
  40.  
  41. });
// 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);
    });
 
});

More Slider Resources:

Copyright © 2009 Yahoo! Inc. All rights reserved.

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