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.
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.
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: Logging and debugging is currently turned off for this example.