Core idea: QuickUI controls and jQuery UI widgets can coexist on a page. A QuickUI control can host a jQuery widget, and vice versa.

The QuickUI and jQuery UI frameworks are both built on top of the underlying jQuery library, although they present different models for creating UI components. Both frameworks can be used together on a page, and the components for each framework (controls in QuickUI, widgets in jQuery UI) can host components from the other.

If you are already using a jQuery UI widget, you can easily incorporate it into a QuickUI control by invoking the widget in the control class’ JSON.

The demo code creates a QuickUI control called ColorSlider which implements a labeled slider control that can return a value between 0 and 255 (the limits of a CSS RGB color). The class uses a jQuery UI slider to implement the slider portion. To this slider, the ColorSlider class adds a content property whose value will be rendered as the slider’s label.

The slider is created by adding a div to the control, then applying the jQuery slider() plugin to it, which does the work of creating the slider elements. The slider() plugin is invoked by including a “slider:” key after the “html:” key, and passing any plugin options (like the maximum and minimum values shown here) as a nested dictionary.

The demo creates three instances of the ColorSlider class, and sets the demo’s background color to the RGB value indicated by the sliders.

Your goal: Change the slider behavior so that the slider’s thumb moves in steps of 16. You can do this by setting the “step:” key in the nested dictionary that creates the slider, and passing a value of 16.