jQuery UI API - Slider Widget

Usage

Description: Drag the handle to select a value.

Version Added: 1.5

The jQuery UI Slider plugin allows selection via a slider. It offers various options such as multiple handles and ranges. Handles can be moved with the mouse or arrow keys.

The Slider Widget creates handle elements with the class ui-slider-handle upon initialization. You can specify custom handle elements by creating and appending elements before initialization and adding the ui-slider-handle class to them. It will only create the number of handles needed to match the length of the value / values. For example, if you specify values: [1, 5, 18] and create one custom handle, the plugin will create the other two.

Theming

The Slider Widget uses the jQuery UI CSS Framework to define its appearance and style. If you need to use specific styles for the slider, you can use the following CSS class names:

ui-slider: The track of the slider control. This element will additionally have a ui-slider-horizontal or ui-slider-vertical class based on the slider's orientation.
ui-slider-handle: The slider handle.
ui-slider-range: The selected range when the range option is set. This element will additionally have a ui-slider-range-min or ui-slider-range-max class if the range option is set to "min" or "max", respectively.

Dependencies

Additional Notes

This widget requires some functional CSS to work. If you create a custom theme, use the widget-specific CSS file as a starting point.

Example

A simple jQuery UI Slider.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Slider Widget Demo</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <style>#slider { margin: 10px; }</style>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>

<div id="slider"></div>

<script>
$( "#slider" ).slider();
</script>

</body>
</html>

View Demo