YUI 3.x Home -

Site Search (YDN & YUIBlog):

# YUI Library Examples: Slider: Basic Sliders

Note: This is YUI 3.x. Looking for YUI 2.x?

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

### 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 */ });

### 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 skin vert_slider = new Y.Slider({ axis: 'y', // vertical Slider value: 30, // initial value railSize: '10em', // range the thumb can move through thumbImage: 'assets/images/thumbY.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.get('#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');

### 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: 'assets/images/thumbX.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: 'assets/images/thumbX.png' }). render('.horiz_slider'). after('valueChange',function (e) { Y.get('#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 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.get('#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: 'assets/images/thumbY.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: 'assets/images/thumbX.png' }). render('.horiz_slider'). after('valueChange',function (e) { Y.get('#horiz_value').set('innerHTML', 'Value: ' + e.newVal); }); });

Copyright © 2009 Yahoo! Inc. All rights reserved.

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