YUI 3.x Home -

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.

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.

Set up your YUI instance

Create a YUI instance and use the slider module.

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.

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

Then finally, we'll render the Slider into the first element with the class "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.

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.

And that's all there is to it!

Full Code Listing

Copyright © 2009 Yahoo! Inc. All rights reserved.

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