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.

Next, add a listener for the Button instance's "click" event that will place the Slider markup inside the Menu instance's body element and then render the Menu. (Defering the rendering of the Menu until the firing of the "click" event improves the intial load time of the Button instance.)

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.

Copyright © 2008 Yahoo! Inc. All rights reserved.

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