Yahoo! Developer Network Home - Help

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-currentopactiy\">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-currentopactiy"); 
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 "render" event handler to the Menu instance that 
15    will instantiate the Slider.
16*/ 
17 
18 
19oOpacityMenu.subscribe("render", function () { 
20 
21    // Instantiate the Slider 
22 
23    oSlider = YAHOO.widget.Slider.getHorizSlider("slider-bg", "slider-thumb", 0, 200, 1); 
24     
25 
26    // Set the initial value of the Slider instance 
27 
28    oSlider.setValue(200, true); 
29 
30 
31    // Maintain a reference to the Slider instance's root element 
32 
33    var oSliderEl = Dom.get("slider-bg"); 
34 
35 
36    // Subscribe to the Slider instance's "change" event 
37 
38    oSlider.subscribe("change", function() { 
39 
40        /*
41            Divide the pixel offset in half to get a value between 
42            0 and 100 - used to convey the current opacity via the
43            Button instance's label. 
44        */ 
45         
46        var nValue = (Math.round(oSlider.getValue() * .5)), 
47 
48            /*
49                 Divide by 100 in order to set provide a compatible
50                 value for the CSS "opacity" property. 
51            */ 
52 
53            nOpacity = (nValue * .01); 
54 
55 
56        /*
57             Update the title attribute of the Slider instance's 
58             root element.  This helps assistive technology to 
59             communicate the state change.
60        */ 
61 
62        oSliderEl.title = "slider value = " + nOpacity; 
63         
64 
65 
66 
67        // Set the opacity of the photo 
68 
69        Dom.setStyle("photo", "opacity", nOpacity); 
70 
71 
72 
73 
74        // Update the text label of the Button instance 
75 
76        oCurrentOpacity.innerHTML = (nValue + "%"); 
77 
78    }); 
79 
80 
81    function focusSlider() { 
82 
83        if ((YAHOO.env.ua.ie || YAHOO.env.ua.gecko) && oSliderEl) { 
84 
85            window.setTimeout(function () {                     
86 
87                oSliderEl.focus(); 
88             
89            }, 0); 
90         
91        }                     
92     
93    }     
94 
95 
96    // Focus the Slider instance each time it is made visible 
97 
98    oOpacityMenu.subscribe("show", focusSlider); 
99 
100}); 
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-currentopactiy { 
2 
3    width: 3em; 
4    font-style: normal; 
5    display: block; 
6    text-align: left; 
7 
8} 
view plain | print | ?

YUI Logger Output:

Note: Logging and debugging is currently turned off for this example.

Reload with logging
and debugging enabled.

More Button Control Resources:

Copyright © 2008 Yahoo! Inc. All rights reserved.

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