YUI Library Examples: Button Control: Slider Button

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.

/*
    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.

YUI Library Examples: Button Control: Slider Button

YUI Logger Output:

Button Control Examples:

More Button Control Resources: