Sliders

× −

Basic Slider

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

× −

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 a different background color to indicate those values are selected.

× −

Range With Fixed Maximum

Fix the maximum value of the range slider so that the user can only select a minimum. Set the range option to max.

× −

Range With Fixed Minimum

Fix the minimum value of the range slider so that the user can only select a maximum. Set the range option to min.

× −

Vertical Slider

Change the orientation of the slider to vertical. Assign a height value via .height() or by setting the height through CSS, and set the orientation option to vertical

× −

Vertical Range Slider

Change the orientation of the range slider to vertical. Assign a height value via .height() or by setting the height through CSS, and set the orientation option to vertical