Latest web development tutorials

jQuery UI API - slider components (Slider Widget)

category

Widgets (Widgets)

usage

Description: Drag the handle to select a value.

New version: 1.5

jQuery UI Slider (Slider) plug-in allows selected via a slider. There are various options, such as multiple handles and range. The handle can be moved using the mouse or the arrow keys.

Slider components (Slider Widget) will be created with the class during initialization ui-slider-handle handle element. You can create and append element before initialization, while adding to the element ui-slider-handle , class to specify a custom handle element. It will only create a matching value / values desired length of the handle number. For example, if you specify values: [ 1, 5, 18 ] , and create a custom handle, plug-in will create the other two.

Theming

Slider components (Slider Widget) using jQuery UI CSS framework to define the look and feel of its style. If you need to use the slider to specify the style, you can use the following CSS class name:

  • ui-slider : Slider control track. This element will be based on the slider orientation additionally with a ui-slider-horizontal or ui-slider-vertical , class.
    • ui-slider-handle : slider handle.
    • ui-slider-range : When setting range when the option to use the selected range. If the range option is set to "min" or "max" , with the additional elements are respectively a ui-slider-range-min or ui-slider-range-max , class.

rely

Additional information

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

Examples

A simple jQuery UI Slider (Slider). 

<! Doctype html>
<Html lang = "en">
<Head>
  <Meta charset = "utf-8">
  <Title> slider member (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>