Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

167 lines (165 sloc) 8.006 kb
<?xml version="1.0"?>
<entry name="slider" type="widget" widget-element="slider">
<title>Slider Widget</title>
<desc>Drag a handle to select a numeric value.</desc>
<longdesc>
<p>The jQuery UI Slider plugin makes 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.</p>
<p>The slider widget will create handle elements with the class <code>ui-slider-handle</code> on initialization. You can specify custom handle elements by creating and appending the elements and adding the <code>ui-slider-handle</code> class before initialization. It will only create the number of handles needed to match the length of <a href="#option-value"><code>value</code></a>/<a href="#option-values"><code>values</code></a>. For example, if you specify <code>values: [ 1, 5, 18 ]</code> and create one custom handle, the plugin will create the other two.</p>
</longdesc>
<note id="functional-css"/>
<added>1.5</added>
<options>
<option name="animate" default="false">
<desc>Whether to slide the handle smoothly when the user clicks on the slider track. Also accepts any valid <a href="//api.jquery.com/animate/#duration">animation duration</a>.</desc>
<type name="Boolean">
<desc>When set to <code>true</code>, the handle will animate with the default duration.</desc>
</type>
<type name="String">
<desc>The name of a speed, such as <code>"fast"</code> or <code>"slow"</code>.</desc>
</type>
<type name="Number">
<desc>The duration of the animation, in milliseconds.</desc>
</type>
</option>
<xi:include href="../includes/widget-option-disabled.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<option name="max" type="Number" default="100">
<desc>The maximum value of the slider.</desc>
</option>
<option name="min" type="Number" default="0">
<desc>The minimum value of the slider.</desc>
</option>
<option name="orientation" type="String" default='"horizontal"'>
<desc>Determines whether the slider handles move horizontally (min on left, max on right) or vertically (min on bottom, max on top). Possible values: <code>"horizontal"</code>, <code>"vertical"</code>.</desc>
</option>
<option name="range" default="false">
<desc>Whether the slider represents a range.</desc>
<type name="Boolean">
<desc>If set to <code>true</code>, the slider will detect if you have two handles and create a stylable range element between these two.</desc>
</type>
<type name="String">
<desc>Either <code>"min"</code> or <code>"max"</code>. A min range goes from the slider min to one handle. A max range goes from one handle to the slider max.</desc>
</type>
</option>
<option name="step" type="Number" default="1">
<desc>Determines the size or amount of each interval or step the slider takes between the min and max. The full specified value range of the slider (max - min) should be evenly divisible by the step.</desc>
</option>
<option name="value" type="Number" default="0">
<desc>Determines the value of the slider, if there's only one handle. If there is more than one handle, determines the value of the first handle.</desc>
</option>
<option name="values" type="Array" default='null'>
<desc>This option can be used to specify multiple handles. If the <a href="#option-range"><code>range</code></a> option is set to <code>true</code>, the length of <code>values</code> should be 2.</desc>
</option>
</options>
<events>
<xi:include href="../includes/widget-event-create.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<event name="start" type="slidestart">
<desc>Triggered when the user starts sliding.</desc>
<argument name="event" type="Event"/>
<argument name="ui" type="Object">
<property name="handle" type="jQuery">
<desc>The jQuery object representing the handle being moved.</desc>
</property>
<property name="value" type="Number">
<desc>The current value of the slider.</desc>
</property>
</argument>
</event>
<event name="slide" type="slide">
<desc>Triggered on every mouse move during slide. The value provided in the event as <code>ui.value</code> represents the value that the handle will have as a result of the current movement. Canceling the event will prevent the handle from moving and the handle will continue to have its previous value.</desc>
<argument name="event" type="Event"/>
<argument name="ui" type="Object">
<property name="handle" type="jQuery">
<desc>The jQuery object representing the handle being moved.</desc>
</property>
<property name="value" type="Number">
<desc>The value that the handle will move to if the event is not canceled.</desc>
</property>
<property name="values" type="Array">
<desc>An array of the current values of a multi-handled slider.</desc>
</property>
</argument>
</event>
<event name="change" type="slidechange">
<desc>Triggered after the user slides a handle, if the value has changed; or if the value is changed programmatically via the <a href="#method-value"><code>value</code></a> method.</desc>
<argument name="event" type="Event"/>
<argument name="ui" type="Object">
<property name="handle" type="jQuery">
<desc>The jQuery object representing the handle that was changed.</desc>
</property>
<property name="value" type="Number">
<desc>The current value of the slider.</desc>
</property>
</argument>
</event>
<event name="stop" type="slidestop">
<desc>Triggered after the user slides a handle.</desc>
<argument name="event" type="Event"/>
<argument name="ui" type="Object">
<property name="handle" type="jQuery">
<desc>The jQuery object representing the handle that was moved.</desc>
</property>
<property name="value" type="Number">
<desc>The current value of the slider.</desc>
</property>
</argument>
</event>
</events>
<methods>
<xi:include href="../includes/widget-method-destroy.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<xi:include href="../includes/widget-method-disable.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<xi:include href="../includes/widget-method-enable.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<xi:include href="../includes/widget-method-option.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<method name="value">
<desc>Get or set the value of the slider.</desc>
<signature return="Number">
<desc>Get the value of the slider.</desc>
</signature>
<signature>
<desc>Set the value of the slider.</desc>
<argument name="value" type="Number">
<desc>The value to set.</desc>
</argument>
</signature>
</method>
<method name="values">
<desc>Get or set the handle value(s).</desc>
<signature return="Array">
<desc>Get the value for all handles.</desc>
</signature>
<signature return="Number">
<desc>Get the value for the specified handle.</desc>
<argument name="index" type="Integer">
<desc>The zero-based index of the handle.</desc>
</argument>
</signature>
<signature>
<desc>Set the value for the specified handle.</desc>
<argument name="index" type="Integer">
<desc>The zero-based index of the handle.</desc>
</argument>
<argument name="value" type="Number">
<desc>The value to set.</desc>
</argument>
</signature>
<signature>
<desc>Set the value for all handles.</desc>
<argument name="values" type="Array">
<desc>The values to set.</desc>
</argument>
</signature>
</method>
<xi:include href="../includes/widget-method-widget.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
</methods>
<example>
<height>50</height>
<desc>A simple jQuery UI Slider.</desc>
<css><![CDATA[#slider { margin: 10px; }]]></css>
<code><![CDATA[
$( "#slider" ).slider();
]]></code>
<html><![CDATA[
<div id="slider"></div>
]]></html>
</example>
<category slug="widgets"/>
</entry>
Jump to Line
Something went wrong with that request. Please try again.