Mastering jQuery UI

Implementing the color picker

In order to implement the required functionality, we first need to initialize the sliders and spinners. Whenever a slider is changed, we need to update its corresponding spinner as well, and conversely if someone changes the value of the spinner, we need to update the slider to the correct value. In case any of the value changes, we will then recalculate the current color and update the text or background color depending on the context.

Defining the object structure

We will organize our code using the object literal pattern as we have done in earlier chapters. We will define an init method, which will be the entry point. All event handlers will also be applied inside this method.

To begin with, go to the js folder and ...