Chapter 9, Creating Widgets Using the Widget Factory, was a complex one where we created two widgets using jQuery UI's widget factory. In this chapter, we will relax a bit and build something simple.

We are going to create a color selector, or color picker, that will allow the users to change the text and background color of a page using the slider widget. We will also use the spinner widget to represent individual colors. Any change in colors using the slider will update the spinner and vice versa. The hex value of both text and background colors will also be displayed dynamically on the page.

This is how our page will look after we have finished building it: