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 = " + Math.round(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.

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:

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

Configuration for This Example

YUI Logger Output:

Button Control Examples:

More Button Control Resources: