Sliders View all kinds of Sliders examples below.

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.

Basic

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

Horizontal slider

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

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.

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".

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.

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".

Vertical range slider

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

Range slider

A powerful slider for selecting value ranges, supporting dates and more.

Basic

Basic range slider example.

Edit slider

Range slider with edit inputs at each end.

Date slider

Range slider for select dates.