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 | ?

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

1function onButtonClick() { 
2 
3    // Add Slider markup to the Menu instance's body element 
4 
5    oOpacityMenu.setBody("<div id=\"slider-bg\" tabindex=\"1\" title=\"Slider\"><div id=\"slider-thumb\"><img src=\"../button/assets/thumb-n.gif\"></div></div>"); 
6 
7 
8    /*
9         Render the Menu instance into the element specified as the 
10         Button instance's container
11    */ 
12 
13    oOpacityMenu.render(this.get("container")); 
14 
15 
16    // Align the Menu instance to its corresponding Button 
17 
18    oOpacityMenu.align(); 
19     
20 
21    /*
22        Unsubscribe the listener from the "click" event so that
23        this code runs only once.
24    */  
25 
26    this.unsubscribe("click", onButtonClick); 
27 
28} 
29 
30 
31/*
32    Subscribe to the Button instance's "click" event to render the 
33    Button instance's menu the first time it is made visible.
34*/ 
35 
36oButton.on("click", onButtonClick); 
view plain | print | ?

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