Chapter 6. The Slider and Progressbar Widgets

The slider component allows us to implement an engaging and easy-to-use widget that our visitors should find attractive and intuitive to use. Its basic function is simple. The slider track represents a series of values that are selected by dragging the handle along the track.

The progressbar widget is used to show the percentage complete for any arbitrary process. It's a simple and easy-to-use component with an extremely compact API that provides excellent visual feedback to visitors.

In this chapter we will cover the following topics:

• The default slider implementation

• Custom styling for sliders

• Changing the configuration options

• Creating a vertical slider

• Setting minimum, maximum, and default values

• Enabling multiple handles and ranges

• The slider's built-in event callbacks

• Slider methods

• The default implementation for a progressbar

• The configurable options

• The event API exposed by the widget

• The single unique method exposed by the progressbar

• Some real-world...