Color schemes

More color schemes will be available soon!

Layout options
Boxed layout backgrounds

Sliders The slider widget transforms selected elements into sliders. There are various options such as multiple handles and ranges. The handle can be moved with the mouse or the arrow keys.

Documentation

To see all the available options & configurations, we suggest reading the jQueryUI sliders documentation.

Basic example

The basic slider is horizontal and has a single handle that can be moved with the mouse or by using the arrow keys.

Get source

                

To view more sliders examples, you can visit the jQueryUI sliders demos page.

Horizontal slider

This slider example has a horizontal orientation and shows the selected value in a different color for easier reading.

Get source

                

Range slider

Set the range option to true to capture a range of values with two drag handles. The space between the handles is filled with the secondary color from the selected layout color scheme to indicate those values are selected.

Get source

                

Vertical slider

This example shows a vertical orietantion slider. You can assign a height value via .height() or by setting the height through CSS, and set the orientation option to "vertical."

Get source

                

Vertical range slider

Just like the horizontal range slider above, but only with vertical orientation.

Get source