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.

View example in new window.

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.

1/*
2    Create a Menu instance whose body element will house a 
3    Slider instance.
4*/ 
5 
6var oOpacityMenu = new YAHOO.widget.Menu("opacitymenu", { width: "220px" }); 
7 
8 
9/*
10    Create a new Button instance, wrapping the label in an 
11    <em> element.  The <em> element will be used to give the 
12    Button instance a fixed width to prevent it from growing
13    and shrinking as the text label is updated.
14*/ 
15 
16var oButton = new YAHOO.widget.Button({  
17                                    type: "menu",  
18                                    id: "opacitybutton",  
19                                    label: "<em id=\"opacitybutton-currentopacity\">100%</em>",  
20                                    menu: oOpacityMenu,   
21                                    container: oDIV }); 
view plain | print | ?

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.

1/*
2    Maintain a reference to the <em> element inside the label
3    so that its text can easily be updated in response to the firing
4    of the Slider instance's "change" event.
5*/ 
6 
7var oCurrentOpacity; 
8 
9 
10oButton.on("appendTo", function () { 
11 
12    // Add Slider markup to the Menu instance's body element 
13 
14    oOpacityMenu.setBody("<div id=\"slider-bg\" tabindex=\"1\" title=\"Slider\"><div id=\"slider-thumb\"><img src=\"../button/assets/thumb-n.gif\"></div></div>"); 
15 
16 
17    /*
18         Render the Menu instance into the element specified as the 
19         Button instance's container
20    */ 
21 
22    oOpacityMenu.render(this.get("container"));          
23 
24    oCurrentOpacity = Dom.get("opacitybutton-currentopacity"); 
25 
26}); 
view plain | print | ?

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.

1/*
2    Give the Button instance's <button> element an id so that 
3    clicking its corresponding <label> element will result in the 
4    Button instance receiving focus.
5*/ 
6 
7var oHTMLButton = oButton.get("element").getElementsByTagName("button")[0]; 
8 
9oHTMLButton.id = "opacitybutton-button"; 
10 
11 
12 
13/*
14    Add a "beforeShow" event handler to the Menu instance that 
15    will instantiate the Slider.
16*/ 
17 
18var onMenuBeforeShow = function () { 
19 
20    // Instantiate the Slider 
21 
22    oSlider = YAHOO.widget.Slider.getHorizSlider("slider-bg", "slider-thumb", 0, 200, 1); 
23     
24 
25    // Set the initial value of the Slider instance 
26 
27    oSlider.setValue(200, true); 
28 
29 
30    // Maintain a reference to the Slider instance's root element 
31 
32    var oSliderEl = Dom.get("slider-bg"); 
33 
34 
35    // Subscribe to the Slider instance's "change" event 
36 
37    oSlider.subscribe("change", function() { 
38 
39        /*
40            Divide the pixel offset in half to get a value between 
41            0 and 100 - used to convey the current opacity via the
42            Button instance's label. 
43        */ 
44         
45        var nValue = (Math.round(oSlider.getValue() * .5)), 
46 
47            /*
48                 Divide by 100 in order to set provide a compatible
49                 value for the CSS "opacity" property. 
50            */ 
51 
52            nOpacity = (nValue * .01); 
53 
54 
55        /*
56             Update the title attribute of the Slider instance's 
57             root element.  This helps assistive technology to 
58             communicate the state change.
59        */ 
60 
61        oSliderEl.title = "slider value = " + Math.round(nOpacity); 
62         
63 
64 
65 
66        // Set the opacity of the photo 
67 
68        Dom.setStyle("photo", "opacity", nOpacity); 
69 
70 
71 
72 
73        // Update the text label of the Button instance 
74 
75        oCurrentOpacity.innerHTML = (nValue + "%"); 
76 
77    }); 
78 
79 
80    var focusSlider = function () { 
81 
82        if ((YAHOO.env.ua.ie || YAHOO.env.ua.gecko) && oSliderEl) { 
83 
84            window.setTimeout(function () {                     
85 
86                oSliderEl.focus(); 
87             
88            }, 0); 
89         
90        }                     
91     
92    }; 
93 
94 
95    focusSlider(); 
96 
97 
98    // Focus the Slider instance each time it is made visible 
99 
100    oOpacityMenu.subscribe("show", focusSlider); 
101     
102 
103    // Unsubscribe from the "beforeShow" event, since we only need to initialize the  
104    // Slider once. 
105     
106    oOpacityMenu.unsubscribe("beforeShow", onMenuBeforeShow); 
107 
108}; 
109 
110 
111oOpacityMenu.subscribe("beforeShow", onMenuBeforeShow); 
view plain | print | ?

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.

1#opacitybutton-currentopacity { 
2 
3    width: 3em; 
4    font-style: normal; 
5    display: block; 
6    text-align: left; 
7 
8} 
view plain | print | ?

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.

YUI Logger Output:

Logger Console

INFO 0ms (+0) 4:55:59 PM:
global
Logger initialized

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

Reload with logging
and debugging disabled.

More Button Control Resources:

Copyright © 2009 Yahoo! Inc. All rights reserved.

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