CHAPTER 18 USING THE BUTTON, PROGRESS BAR, AND SLIDER WIDGETS <button id="decr">Decrease</button> <button id="incr">Increase</button> Progress: <span id="progVal"></span>% </body> </html> In this example, I have added a span element that I use to display the numeric progress value. I use the create event to set the initial value. Tip Notice that I have used the same map object for the settings and events of the progress bar. This isn't required, but it does allow you to completely create and configure a widget in a single method call. I use the complete event to disable the Increase button when the progress reaches 100% and the change event to ensure that the button is enabled for other values. I also use this event to update the contents of the span element. You can see the effect in Figure 18-16.