Yahoo! Developer Network Home - Help

YDN Site Search

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

View example in new window.

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

/* Create a Menu instance whose body element will house a Slider instance. */ var oOpacityMenu = new YAHOO.widget.Menu("opacitymenu", { width: "220px" }); /* Create a new Button instance, wrapping the label in an <em> element. The <em> element will be used to give the Button instance a fixed width to prevent it from growing and shrinking as the text label is updated. */ var oButton = new YAHOO.widget.Button({ type: "split", id: "opacitybutton", label: "<em id=\"opacitybutton-currentopactiy\">100%</em>", menu: oOpacityMenu, container: oDIV });

Next, add a listener for the Button instance's "option" 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 "option" event improves the intial load time of the Button instance.)

function onButtonOption() { // Add Slider markup to the Menu instance's body element oOpacityMenu.setBody("<div id=\"slider-bg\" tabindex=\"1\" title=\"Slider\"><div id=\"slider-thumb\"><img src=\"../button/assets/thumb-n.gif\"></div></div>"); /* Render the Menu instance into the element specified as the Button instance's container */ oOpacityMenu.render(this.get("container")); // Align the Menu instance to its corresponding Button oOpacityMenu.align(); /* Unsubscribe the listener from the "option" event so that this code runs only once. */ this.unsubscribe("option", onButtonOption); } /* Subscribe to the Button instance's "option" event to render the Button instance's menu the first time it is made visible. */ oButton.on("option", onButtonOption);

Once the Menu instance is rendered, the Slider markup will be in the page and it is safe to instantiate the Slider instance.

/* Add a "render" event handler to the Menu instance that will instantiate the Slider. */ oOpacityMenu.subscribe("render", function () { // Instantiate the Slider oSlider = YAHOO.widget.Slider.getHorizSlider("slider-bg", "slider-thumb", 0, 200, 1); // Set the initial value of the Slider instance oSlider.setValue(200, true); // Maintain a reference to the Slider instance's root element var oSliderEl = Dom.get("slider-bg"); // Subscribe to the Slider instance's "change" event oSlider.subscribe("change", function() { /* Divide the pixel offset in half to get a value between 0 and 100 - used to convey the current opacity via the Button instance's label. */ var nValue = (Math.round(oSlider.getValue() * .5)), /* Divide by 100 in order to set provide a compatible value for the CSS "opacity" property. */ nOpacity = (nValue * .01); /* Update the title attribute of the Slider instance's root element. This helps assistive technology to communicate the state change. */ oSliderEl.title = "slider value = " + nOpacity; // Set the opacity of the photo Dom.setStyle("photo", "opacity", nOpacity); // Update the text label of the Button instance oCurrentOpacity.innerHTML = (nValue + "%"); }); function focusSlider() { if ((YAHOO.env.ua.ie || YAHOO.env.ua.gecko) && oSliderEl) { window.setTimeout(function () { oSliderEl.focus(); }, 0); } } // Focus the Slider instance focusSlider(); // Focus the Slider instance each time it is made visible oOpacityMenu.subscribe("show", focusSlider); });

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.

#opacitybutton-currentopactiy { width: 3em; font-style: normal; display: block; text-align: left; }

### YUI Logger Output:

Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.

Reload with logging
and debugging disabled.

### Button Control Examples:

- Push Buttons
- Link Buttons
- Checkbox Buttons
- Radio Buttons
- Submit Buttons
- Reset Buttons
- Menu Buttons
- Split Buttons
- Calendar Menu Button
- Calendar Split Button
- Color Picker Button
- Fixed Width Menu Button
- Glowing Button
- Slider Button
- Getting CSS Style Sheets (included with examples for Get Utility)

### More Button Control Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2007 Yahoo! Inc. All rights reserved.

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