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.

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.

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.

/*
	Give the Button instance's <button> element an id so that 
	clicking its corresponding <label> element will result in the 
	Button instance receiving focus.
*/

var oHTMLButton = oButton.get("element").getElementsByTagName("button")[0];

oHTMLButton.id = "opacitybutton-button";

/*
	Add a "beforeShow" event handler to the Menu instance that 
	will instantiate the Slider.
*/

var onMenuBeforeShow = 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 + "%");

});

var focusSlider = function () {

if ((YAHOO.env.ua.ie || YAHOO.env.ua.gecko) && oSliderEl) {

window.setTimeout(function () {

oSliderEl.focus();
			
			}, 0);
		
		}                    
	
	};

focusSlider();

// Focus the Slider instance each time it is made visible

oOpacityMenu.subscribe("show", focusSlider);

// Unsubscribe from the "beforeShow" event, since we only need to initialize the 
	// Slider once.
	
	oOpacityMenu.unsubscribe("beforeShow", onMenuBeforeShow);

};

oOpacityMenu.subscribe("beforeShow", onMenuBeforeShow);

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

YUI Library Examples: Button Control: Slider Button

YUI Logger Output:

Button Control Examples:

More Button Control Resources: