YUI Library Home

YUI Library Examples: Button Control: Slider Button

Button Control: Slider Button

This example demonstrates how to combine a Split Button with a Slider to create an opacity slider button, similar to that found in Adobe Photoshop.

Ella - A Shih Tzu + Maltese Mix Puppy

Begin by creating a Button instance of type "menu" and a Menu instance to house a Slider instance.

Once the new Button is created, add a listener for its "appendTo" event that will be used to render its Menu instance into the same DOM element specified as the containing element for the Button.

Lastly, add a listener for the Menu's "render" event. Once the Menu instance is rendered, the Slider markup will be in the page and it is safe to instantiate the Slider instance.

Lastly, style the <em> element wrapping the Button instance's text label with a fixed width so that the Button doesn't grow or shrink as the text label is updated.

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

Copyright © 2011 Yahoo! Inc. All rights reserved.

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