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.
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.
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.
Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.