jQuery UI API - Slider Widget

Category

Widgets

Usage

Description:Drag a handle to select a numeric value.

Version added:1.5

The jQuery UI Slider plugin allows selection through a slider. There are 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 classui-slider-handleat initialization. You can specify custom handle elements by creating and appending elements before initialization, while adding theui-slider-handleclass to the elements. It will only create the number of handles required to match thevalue/valueslength. For example, if you specifyvalues: [ 1, 5, 18 ], and create one custom handle, the plugin will create the other two.

Theming

The Slider Widget uses thejQuery UI CSS frameworkto define the styling of its look and feel. If you need to use slider-specific styles, you can use the following CSS class names:

  • ui-slider: The track of the slider control. This element will, depending on the slider'sorientationadditionally have aui-slider-horizontalorui-slider-vertical class。
    • ui-slider-handle: The slider handle.
    • ui-slider-range: When therangeoption is set, the selected range used. If therangeoption is set to"min"or"max", this element will additionally haveui-slider-range-minorui-slider-range-max class。

Dependencies

Additional Notes

  • This widget requires some functional CSS, otherwise it will not work. If you create a custom theme, use the widget-specific CSS file as a starting point.

Examples

A simple jQuery UI Slider.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>滑块部件（Slider Widget）演示</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>

Other Extensions