/
slider.xml
166 lines (165 loc) · 7.82 KB
/
slider.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
<?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>